我可以将react.js应用捆绑到多个模块中吗？

Question

假设我有一个网站，其中包含多个标签，并使用react.js构建，每个标签包含大量数据。通常，Webpack捆绑包会将应用程序反应为一个捆绑包，但是如果您从不访问其中一个选项卡，这将浪费资源。是否有可能将它分成单独的捆绑包，而不必重新捆绑react core和react DOM，然后根据请求调用这些额外的静态模块？

我愿意接受不同的建议-webpack，systemjs等。

Answer 1

首先，检查您的体系结构并确保您确实需要它。考虑到典型的情况，其中仅“基础结构”是捆绑软件的一部分，并且所有数据都根据需要通过Ajax下载，因此，当您正确使用时，最终（特别是不太可能）您会得到一个特别大的捆绑软件照顾优化。

回到您的问题...

请记住，这可能不是在公园散步。根据我的经验，当您尝试在虚线之外做一些事情时，问题就会逐渐浮出水面。您可能在服务器渲染，redux或其他方面遇到问题。

无论如何，您有2个选择：

1）使用多页应用程序配置

Webpack将输出多个“块”，您将其配置为具有多个入口点，如下所示：

module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    }
}

您甚至可以拥有“公共块”。在这里看看。

2）使用代码拆分

有一个称为bundle-loader的Webpack加载器，它提供了一个lazy选项，可以根据需要实际下载模块。我在阅读React-Router 4文档时遇到了这个装载程序。他们甚至提供了一个完全不需要路由器的示例，请在此处进行检查。