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

Question

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

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

Answer 1

首先，检查您的架构并确保您确实需要它。考虑到只有“基础设施”是 bundle 的一部分并且所有数据都是根据需要通过 Ajax 下载的典型场景，您最终不太可能(并非不可能)当您 properly take care of optimization 时，一个特别大的 bundle .

回到你的问题...

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

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

1) 使用多页面应用配置

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

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

你甚至可以拥有“公共(public) block ”。 Take a look here .

2) 使用代码分割

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