webpack - 如何使用 `import()` block (Webpack 2.2)控制共享代码的分块

Question

使用 webpack版本 2.2.0 .

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

我遇到的问题是生成的 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 的完整副本模块。就我而言，我有几十个 View 和更多共享模块，所以重复对我来说是一个巨大的问题。这是“webpack-bundle-analyzer”的样子:



我试过添加 CommonChunkPlugin帮助解决这个问题，但它似乎根本不影响动态导入。

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

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

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

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

我怎样才能做到这一点？

我相信这与这个问题有关: https://github.com/webpack/webpack/issues/3981

Answer 1

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

Generate an extra chunk, which contains common modules shared between entry points.

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

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