时间戳

首页 > 解决方案 > Webpack 4 SplitChunksPlugin - 动态导入中的常见依赖项

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

问题描述

根据文档，我正在将动态导入与 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() {...}

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

标签： webpackes6-moduleswebpack-4webpack-splitchunkssplitchunksplugin

解决方案

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

推荐阅读