Javascript 避免从导入的导入中引入代码

我正在进行使我的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();

我假设，由于file1全局导入重包，而file2从file1导入一个函数，因此它将重包作为依赖项获取，即使它不导入实际使用该包的函数。我希望（或者更确切地说，希望）只有file3的块包含了严重的依赖性，因为它是唯一使用它的地方

有没有一个具体的方法，我应该处理这样的进口？也许我可以在webpack中做一个神奇的配置来帮助实现这一点，一个更好的模块/函数结构的方法，还是一个更好的导入函数/模块/包的方法

---

我正在使用webpack 4，我正在使用ES2017

也许可以尝试动态导入

导出函数a（）：字符串{
log（“称为a（）”）；
}
导出异步函数b（）：字符串{
const{foo}=wait import（'ReallyHeavyPackage'）；
返回foo（）；
}

---

我想你要找的是网页

CommonChunksPlugin

：。这个插件从不同的bundle中获取公共块（模块/库），并将它们放入自己的bundle中