假设我有一个带有多个选项卡的网站，使用react.js构建，每个选项卡都包含大量数据。通常，webpack 将反应应用程序捆绑到一个捆绑包中，但如果您从不访问其中一个选项卡，这将浪费资源。是否可以将其分成单独的捆绑包，而无需重新捆绑 React Core 和 React DOM，然后根据请求调用这些额外的静态模块？
我愿意接受不同的建议 - webpack、systemjs 等。
首先，检查您的架构并确保actually需要这个。考虑到只有“基础设施”是捆绑包的一部分的典型场景，all data是通过 Ajax 下载的，因为它们是需要的，当您使用时，您不太可能（并非不可能）最终得到一个特别大的包妥善处理优化 https://github.com/webpack/docs/wiki/optimization#multi-page-app.
回到你的问题...
请记住，这可能不是在公园散步。根据我的经验，当你试图做一些偏离虚线的事情时，问题就会开始出现。您可能会遇到服务器渲染、redux 或其他方面的问题。
无论如何，你有两个选择：
1）使用多页面应用程序配置
Webpack 将输出多个“块”，您将其配置为具有多个入口点，如下所示：
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3"
},
output: {
filename: "[name].entry.chunk.js"
}
}
你甚至可以有“共同的块”。看看这里 https://github.com/webpack/docs/wiki/optimization#multi-page-app.
2）使用代码分割
有一个 Webpack 加载器叫做捆绑加载器 https://github.com/webpack-contrib/bundle-loader提供了一个lazy允许根据需要实际下载模块的选项。我在阅读时遇到了这个加载器React-Router 4文档。他们甚至提供了一个根本不需要路由器的示例，在这里检查 https://reacttraining.com/react-router/web/guides/code-splitting.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
