3

我正在练习使我的 webpack 包更小，并使用 webpack 的包分析器，我看到一个非常重的包被包含在两个不同的异步块中，即使它只使用了一次。在对我的代码进行了一些挖掘之后，我意识到这可能是因为以下情况：

文件1.js

import { foo } from 'ReallyHeavyPackage'

export function a(): string {
    console.log("called a()");
}

export function b(): string {
    return foo();
}

文件2.js

import { a } from './file1.js'

a();

文件 3.js

import { b } from './file1.js'

b();

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

我应该以特定的方式处理这样的导入吗？也许我可以在 webpack 中做一个神奇的配置来帮助解决这个问题，一种更好的构建模块/函数的方法，或者只是更好的导入函数/模块/包的方法？

我正在使用 webpack 4，我在 ES2017

4

2 回答 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

于 2019-01-09T03:36:37.140 回答
0

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

于 2019-02-03T17:34:40.100 回答