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

Question

我目前正在处理一个 react SPA 项目，我必须在其中制作几个具有逻辑的表单。每个表单都有相同的组件和一些独特的。 现在：当客户端选择其中一种形式时，它将使用大通用的 bundle.js。

问题： 有没有办法包装 bundle.js 每个（网页）表单？

因为有几个通用组件我不想为每个表单都做一个项目，但我正在考虑更薄的 bundle.js 文件。

提前感谢您的建议！

Answer 1

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

我强烈建议您使用react-loadable (https://github.com/jamiebuilds/react-loadable) 来处理所有相关逻辑，因为您必须注意很多问题（例如确保您已准备好所有捆绑包）并在客户端渲染之前加载。或者确保您甚至知道这些模块是什么）

您可能遇到的下一个问题是，即使包现在更小了，但每个包中都有公共位。因此，如果用户访问多个 URL，他们必须多次下载。

这里有 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)。 如果你等不及了，已经有 Alpha 版了，一定很快就会进入 Beta 版。