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

Posted 2023-02-23

【中文标题】Webpack 4 SplitChunksPlugin - 动态导入中的常见依赖项

【英文标题】：Webpack 4 SplitChunksPlugin - Common dependencies in Dynamic Imports

【发布时间】：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 之间的任何常见依赖项，因为它们是动态导入的。 请问有什么想法吗？

【参考方案1】：

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