避免进口的进口带来码

问题描述 投票:3回答:2

我经历使我的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

javascript webpack-4 tree-shaking es2017 javascript-import
2个回答
1
投票

也许尝试动态的进口?

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


0
投票

我想你要找的是什么的WebPack CommonChunksPluginhttps://webpack.js.org/plugins/commons-chunk-plugin/。这个插件从不同的包需要共同块(模块/库),并将它们放入自己的包。

© www.soinside.com 2019 - 2024. All rights reserved.