如何使用`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

- Ev Haus

---

我想我看到了你在这里遇到的同样问题：https://stackoverflow.com/questions/44532817/property-code-splitting-modules-that-import-third-party-libraries - cgatian

@evgueni-naverniouk 你最终解决了这个问题吗？ - KFE

@KFE 不是的。webpack 4 默认更积极地进行代码块分割，这有所帮助，但我仍然没有找到让它按照我的意愿进行操作的方法。 - Ev Haus

Answer 1

为了解决重复错误，您可以使用由webpack优化包提供的CommonsChunkPlugin。根据文档所述，它执行以下操作：

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

至于您描述的第二个问题，那将是gulp的任务。Gulp接受输入流并将该流输出到文件中。基本上创建原始文件的1对1副本，但然后进行转译、编译等等。

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

- DevNebulae

---

我尝试使用CommonsChunkPlugin，但似乎它不适用于主入口点内的任何import()语句。该插件似乎只能从2个或更多的入口点创建公共块，而不能从单个导入的子导入中创建。我尝试了各种插件配置，但似乎都没有起作用。 - Ev Haus

你能分享一下你的配置吗？ - DevNebulae

我已经更新原始问题并提供了更多详细信息。这里是用于重现问题的存储库链接：https://github.com/EvNaverniouk/webpack-code-splitting - Ev Haus

Answer 2

在webpack 4中，我认为你要找的是将minSize设置为0。如果Webpack认为这样可以节省HTTP请求，它会复制此代码。将minsize设置为0会强制分离它。

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

- jojoshua