是否有可能同时获得动态导入和拆分块(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.js
my-module
仅包含vendors.bundle.js
包含所有 node_modules 依赖项
到目前为止,我得到的结果是,当您将optimization
密钥(添加 splitChunks)添加到webpack.config.js
.
我应该在什么方向进一步调查?我的直觉是,也许我可以找到一种方法来更好地调整动态导入生成块的方式,但也许我错了?