如何使用`import（）`块（Webpack 2.2）控制共享代码的分块

Question

使用webpack版本2.2.0。

我的单页应用只有一个entry配置：entry: { app: ['./js/main.js'] }。这是一个通过import('./js/views/1')动态加载视图以进行代码分割的应用程序。

我遇到的问题是生成的views/1，views/2等文件在其中有大量重复的模块。文件及其内容如下所示：

• main：./js/main.js
  • 0：./js/views/1.js
  • ./js/modules/a.js
  • ./js/modules/b.js
  • 1：./js/views/2.js
  • ./js/modules/b.js
  • ./js/modules/c.js

请注意，views/1.js和views/2.js都有共享modules/b.js模块的完整副本。在我的情况下，我有几十个视图和更多的共享模块，所以重复是我的一个巨大的问题。这是`webpack-bundle-analyzer'的样子：

我已尝试添加CommonChunkPlugin来帮助解决此问题，但它似乎根本不会影响动态导入。

我正在寻找的是一种让webpack自动将所有共享模块移动到单独文件中的方法。理想情况下，我希望webpack输出以下块：

• main：./js/main.js
  • 0：./js/views/1.js
  • 1：./js/views/2.js
  • 2：./js/modules/a.js
  • 3：./js/modules/b.js
  • 4：./js/modules/c.js

因此每个模块实际上都是一个单独的块。这将是使用HTTP2加载它们的最佳方式。

以下是示例项目的代码：https://github.com/EvNaverniouk/webpack-code-splitting

我怎样才能做到这一点？

我认为这与此问题有关：https://github.com/webpack/webpack/issues/3981

Answer 1

要解决重复错误，您可以使用webpack优化包提供的CommonsChunkPlugin。由documentation表示，它执行以下操作：

  

生成一个额外的块，其中包含入口点之间共享的公共模块。

至于你所描述的第二个问题，那将是一项任务。 Gulp接收输入流并将该流输出到文件中。基本上创建原始文件的1×1副本，但随后进行编译，编译等等。

我不推荐Web的第二种结构，因为它为浏览器创建了很多HTTP请求，这可能需要相当长的时间。特别是如果您的网站运行在HTTP / 1.1协议上。让客户端下载包含更多内容的较少文件通常更有利。

Answer 2

在webpack 4中，我认为您正在寻找的是将minSize设置为0。如果Webpack认为它将保存HTTP请求，则会复制此代码。将minsize设置为0会强制将其分开。

optimization: {
    splitChunks: {
        chunks: "all",
        minSize: 0
    }
}