Webpack 4 SplitChunksPlugin - 动态导入中的常见依赖项答案

【问题标题】：Webpack 4 SplitChunksPlugin - Common dependencies in Dynamic ImportsWebpack 4 SplitChunksPlugin - 动态导入中的常见依赖项
【发布时间】：2019-06-03 06:53:27
【问题描述】：

根据文档，我正在使用带有 Webpack 的动态导入： https://webpack.js.org/guides/code-splitting/#dynamic-imports

非常基本的示例（不是实际代码）：

// main.js

import('./moduleA).then((moduleA) => {
  moduleA.init();
});
import('./moduleB).then((moduleB) => {
  moduleB.init();
});

// 模块A.js

import utility from './utility';
export function init() {...}

// 模块B.js

import utility from './utility';
export function init() {...}

问题是 utility 模块包含在 moduleA 和 moduleB 块中，所以它是重复的。我找不到让 Webpack 像标准导入那样将这些类型的依赖项拆分为单独的公共块的方法。 SplitChunksPlugin 似乎没有捆绑 moduleA 和 moduleB 之间的任何常见依赖项，因为它们是动态导入的。请问有什么想法吗？

【问题讨论】：

标签： webpack es6-modules webpack-4 webpack-splitchunks splitchunksplugin

【解决方案1】：

好的，所以我错过了文档中的几行 - 或者只是误解了它。 Webpack 足够聪明，可以知道这些常见的依赖项是否真的需要拆分成它们自己的块。如果公共依赖项超过某个文件大小，那么它将被拆分，如果文件足够小，那么 Webpack 认为将其捆绑到每个模块中会更高效。这还基于其他条件，因此如果您发现自己处于此位置，请查看文档。

【讨论】：