Question

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

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

// main.js

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

// moduleA.js

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

// moduleB.js

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

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

Answer 1

好的，所以我错过了文档中的几行-或只是误解了它。 Webpack非常聪明，可以知道实际上是否需要将这些公共依赖项拆分为自己的块。如果公共依赖项超过某个文件大小，则它将被拆分；如果文件足够小，则Webpack认为将其捆绑到每个模块中的性能更高。这还有其他条件，因此，如果您处于这个位置，请查看一下文档。

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

1 个答案: