使用 System.import 进行 Webpack 2 代码拆分：依赖项的依赖项答案

【问题标题】：Webpack 2 code splitting with System.import: Dependencies of dependencies使用 System.import 进行 Webpack 2 代码拆分：依赖项的依赖项
【发布时间】：2017-06-03 03:47:38
【问题描述】：

好的，我正在努力将我们的 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 在some-other-module 的块中也包含moment，导致重复。

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

【问题讨论】：

标签： javascript webpack webpack-2 code-splitting

【解决方案1】：

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

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

你可以在这个页面上看到 CommonsChunkPlugin async 的描述 https://webpack.js.org/plugins/commons-chunk-plugin/

【讨论】：