如何通过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 和每次静态导入，效果都不佳

SplitChunksPlugin

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

// 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。