webpack - 如何通过 Webpack 4 获得动态导入和 SplitChunksPlugin 的好处？

Question

是否可以同时获得动态导入和拆分块( SplitChunksPlugin )的好处？

动态导入

当我使用动态导入时，我会为每个动态导入的库获取一个块。但是，静态导入的任何内容都会添加到同一个(大)包中。伪代码:

// my-module.js
const foolib = await import('foolib');
export default foolib('some-arg');

结果是:

foolib.bundle.js仅包含 foolib , 太好了

my-module.bundle.js包含 my-module 和 每个静态导入，都不是很好

拆分块插件

做我想要的另一半。伪代码:

// my-module.js
import foolib from 'foolib';
export default foolib('some-arg');

结果是:

my-module.bundle.js包含 my-module只有，很棒

vendors.bundle.js包含所有 node_modules 依赖项，很棒

但是，该解决方案缺乏动态加载。

带有自定义块的动态导入

这个想法是这个配置会给我所有的东西。

foolib.bundle.js仅包含 foolib因为它是动态导入的

my-module.bundle.js包含 my-module只有

vendors.bundle.js包含所有 node_modules 依赖项

到目前为止，我得到的结果是，在添加 optimization 时不考虑动态导入。键(添加 splitChunks)到 webpack.config.js .

我应该朝哪个方向进一步调查？我的直觉是，也许我可以找到一种方法来更好地调整动态导入生成块的方式，但也许我错了？

Answer 1

退房 Paragons .它同时使用动态导入和拆分块。 BundleAnalyzerPlugin 插件是为生产模式设置的。生成 my-app 后，您可以执行 npm run build并且客户端报告将在 dist 目录中发出。这是一个示例屏幕截图:



您也可以查看 Webpack config .