为每个html（表单）生成单独的bundle.js

Question

我目前正在开发一个反应SPA项目，我必须用逻辑制作几个表格。每个表单都有相同的组件，也有一些独特的。 现在：当客户选择其中一个表单时，它将使用大公共bundle.js。

问题：是否有解决方案来包装bundle.js每个（网页）表单？

因为有几个常见的组件，我不想为每个表单创建一个项目，但我正在考虑更多的bundle.js文件。

提前感谢您的建议！

Answer 1

通过使用动态导入功能和Webpack，确实可以为每个页面生成单独的包。

我强烈建议使用react-loadable（https://github.com/jamiebuilds/react-loadable）来处理周围的所有逻辑，因为有一堆你必须要注意的问题（比如确保你有在客户端渲染之前准备好并加载所有的bundle。或者确保你甚至知道那些模块是什么）

您可能遇到的下一个问题是，即使捆绑包现在更小，但每个捆绑包中的公共位也是如此。因此，如果用户访问多个网址，则必须多次下载。

这里有2个选项：

• 在Webpack中配置您的CommonsChunkPlugin，使其具有一个公共模块，模块共享超过x个包。这里有一个很好的介绍：（https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318）。
• 或者你等了几个星期，直到Webpack 4出局。他们应该有一个插件，可以自动完成所有这些操作。 （https://github.com/webpack/webpack/milestone/15）。 如果你不能等待，已经有了alphas，必须尽快进行测试。