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

Question

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

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

Answer 1

首先，检查您的架构并确保您确实需要它。考虑到只有“基础设施”是捆绑包的一部分并且所有数据在需要时通过 Ajax 下载的典型场景，您最终会得到的可能性不大（并非不可能）当你properly take care of optimization 时，一个特别大的捆绑包。

回到你的问题...

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

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

1) 使用多页应用配置

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

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

您甚至可以拥有“通用块”。 Take a look here.

2) 使用代码拆分

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