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

Question

使用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

Answer 1

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

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

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

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