使用System.import进行Webpack 2代码拆分：依赖关系的依赖关系

Question

好的，所以我正在努力在一堆异步加载的块中正确地拆分我们的JS。

我在几个入口点使用import，这很有效：

module.exports = Promise.all([
    import('moment'),
    import('some-other-module')
]).then((deps) => {
    let [moment, someOtherModule] = deps;
}

其他地方：

module.exports = Promise.all([
    import('moment'),
]).then((deps) => {
    let [moment] = deps;
}

Webpack成功为moment和some-other-module创建单独的块  并在需要时加载文件异步。

然而

some-other-module实际上也需要moment，这使得Webpack在moment的块中也包含some-other-module，导致重复。

这是预期的行为吗？如果是这样，推荐的解决方案是什么？

Answer 1

我在webpack.config的插件部分添加了以下代码行，它将依赖关系分开，并根据需要并行加载

new webpack.optimize.CommonsChunkPlugin({
    async: true
})

您可以在此页面上看到CommonsChunkPlugin异步的描述 https://webpack.js.org/plugins/commons-chunk-plugin/