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

【问题标题】：How to control chunking of shared code using `import()` chunks (Webpack 2.2)如何使用 `import()` 块控制共享代码的分块（Webpack 2.2）
【发布时间】：2017-05-28 06:24:18
【问题描述】：

使用webpack 版本2.2.0。

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

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

主：./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 输出以下块：

主要：./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

【问题讨论】：

我想我遇到了同样的问题here
@evgueni-naverniouk 你能解决这个问题吗？
@KFE 不。 webpack 4 默认情况下会进行更积极的分块，所以这有点帮助，但我仍然没有找到让它做我想做的事情的方法。

标签： webpack

【解决方案1】：

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

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

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

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

【讨论】：

我尝试过使用 CommonsChunkPlugin，但它似乎不适用于主入口点内的任何 import() 语句。该插件似乎只能从 2 个或更多入口点创建公共块，而不是从单个导入的子导入。我已经尝试了插件的各种配置，但似乎没有任何效果。
你能分享你的配置吗？
我已经用更多细节更新了原始问题。这是重现该问题的仓库：github.com/EvNaverniouk/webpack-code-splitting

【解决方案2】：

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

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

【讨论】：