为每个HTML(表单)生成单独的bundle.js



我目前正在从事一个React Spa项目,在该项目中,我必须用逻辑做几种表格。每种形式都有相同的组件和一些独特的组件。现在:客户端选择其中一种表单时,它将使用大型common bundle.js。

问题:是否有包装捆绑包的解决方案(网页(表单?

因为我不想为每种表格制作一个项目,但是我考虑了更薄的bundle.js文件。

感谢提前的建议!

确实可以使用动态导入函数和webpack为每个页面生成单独的捆绑包。

我强烈建议使用 react-loadable(https://github.com/jamiebuilds/reaeact-loadable(处理周围的所有逻辑确保您准备好所有捆绑包并在客户端渲染之前加载。或确保您甚至知道这些模块是什么(

您可能遇到的下一个问题是,即使捆绑包现在较小,每个捆绑都在每个捆绑包中。因此,如果用户转到多个URL,他们必须多次下载。

在这里您有2个选项:

  • 要么在WebPack中配置您的Consonschunkplugin,以使其在超过X捆绑范围内具有共享模块的共享模块。一个很棒的介绍在这里:( https://medium.com/webpack/webpack-bits-getting-the-most-the-most-of-the-commonschunkplugin-ab389e5f318(。
  • 或者您再等几个星期,直到WebPack 4出来。他们应该有一个插件,可以为您自动执行所有操作。(https://github.com/webpack/webpack/milestone/15(。如果您等不及了,已经有Alphas了,一定很快就会到Beta。

最新更新