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

Question

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

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

Answer 1

首先，检查您的体系结构，确保实际需要它。考虑到只有＆＃34;基础设施＆＃34;的典型情况。是捆绑包的一部分，所有数据是在需要时通过Ajax下载的，当你properly take care of optimization时，你最终会得到一个特别大的捆绑包是不太可能的（并非不可能）

回到你的问题......

请记住，这可能不是在公园散步。根据我的经验，当你试图在虚线上做一些事情时，问题开始出现在路上。您可能遇到服务器渲染，redux或其他问题。

无论如何，你有两个选择：

1）使用多页应用配置

Webpack将输出多个＆＃34;块＆＃34;将它配置为具有多个这样的入口点：

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

你甚至可以拥有＆＃34;常见的块＆＃34;。 Take a look here

2）使用代码拆分

有一个名为bundle-loader的Webpack加载器，它提供了一个lazy选项，允许在需要时实际下载模块。我在阅读React-Router 4文档时遇到了这个加载器。他们甚至提供了一个根本不需要路由器的例子，check it here。