我经历使我的WebPack束较小,并且使用我看到被包含在两个不同的异步块一个非常沉重的包的WebPack的束分析仪的运动,即使它只能使用一次。在我的代码一些挖后,我认识到,这是因为以下情形的可能:
file1.js
import { foo } from 'ReallyHeavyPackage'
export function a(): string {
console.log("called a()");
}
export function b(): string {
return foo();
}
file2.js
import { a } from './file1.js'
a();
file3.js
import { b } from './file1.js'
b();
我假设,因为文件1导入重包装全球范围内,和file2 file1中导入一个函数,它就会重包作为依赖,即使它不会导入实际使用的包的功能。我期望(或者说,希望),仅用于文件3块有严重依赖包括在内,因为它只是在那里正在使用它的地方。
有没有我应该处理这样的进口一种特定的方式?也许魔术的配置我可以做的WebPack来解决这个问题,结构化模块/功能的更好的方法,或只是更好的方式导入功能/模块/包?
我使用的WebPack 4和我在ES2017
也许尝试动态的进口?
export function a(): string {
console.log("called a()");
}
export async function b(): string {
const { foo } = await import('ReallyHeavyPackage');
return foo();
}
https://webpack.js.org/guides/code-splitting/#dynamic-imports
我想你要找的是什么的WebPack CommonChunksPlugin
:https://webpack.js.org/plugins/commons-chunk-plugin/。这个插件从不同的包需要共同块(模块/库),并将它们放入自己的包。