如何通过 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.jsmy-module只包含，很棒
• vendors.bundle.js 包含所有 node_modules 依赖项，很棒

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

带有自定义块的动态导入

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

• foolib.bundle.js只包含foolib因为它是动态导入的
• my-module.bundle.jsmy-module只包含
• vendors.bundle.js 包含所有 node_modules 依赖项

---

到目前为止，我得到的结果是，当您将optimization密钥（添加 splitChunk）添加到webpack.config.js.

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

Answer 1

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

您还可以查看Webpack 配置。