避免从导入中引入代码答案

【问题标题】：Avoid bringing code from imports of imports避免从导入中引入代码
【发布时间】：2019-06-03 19:06:09
【问题描述】：

我正在练习使我的 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 上

【问题讨论】：

标签： javascript webpack-4 tree-shaking ecmascript-2017 javascript-import

【解决方案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

【讨论】：

【解决方案2】：

我认为您正在寻找的是 Webpack CommonChunksPlugin: https://webpack.js.org/plugins/commons-chunk-plugin/。这个插件从不同的包中获取公共块（模块/库）并将它们放入自己的包中。

【讨论】：