7

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

动态导入

当我使用动态导入时,每个已动态导入的库都会得到一个块。但是,任何静态导入的东西都会被添加到同一个(大)包中。伪代码:

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

结果是:

  • foolib.bundle.js只包含foolib,很棒
  • my-module.bundle.js包含my-module 每个静态导入,不是很好

SplitChunks插件

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

// 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.jsmy-module仅包含
  • vendors.bundle.js包含所有 node_modules 依赖项

到目前为止,我得到的结果是,当您将optimization密钥(添加 splitChunks)添加到webpack.config.js.

我应该在什么方向进一步调查?我的直觉是,也许我可以找到一种方法来更好地调整动态导入生成块的方式,但也许我错了?

4

1 回答 1

1

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

在此处输入图像描述

您还可以查看Webpack 配置

于 2018-08-09T16:58:31.783 回答