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

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