如何减少 babel-polyfill 的大小（最小化 150 KB）？答案

【问题标题】：How to reduce babel-polyfill size (150 KB minified)?如何减少 babel-polyfill 的大小（最小化 150 KB）？
【发布时间】：2018-10-09 16:11:48
【问题描述】：

我刚刚设置了新的 webpack 4 项目，并在我的主 js 文件中导入了 babel-polyfill

import 'babel-polyfill';

在 webpack 生产构建之后，我用 source-map-explorer 分析了我的 bandle，我看到了这样的图片

所以 babel-polyfill (core-js) 占用了 150 Kb，这在 IMO 中太多了。

有什么想法可以减小尺寸吗？我不想包含任何特定的 polyfill（应该有一些摇树，所以应该删除未使用的代码？）。

【问题讨论】：

@JaromandaX，没有。但根据来自 github 的 cmets，它应该缩小到 ~60-80 Kb。在我的情况下，我看到 x2 大小，这很奇怪。你不觉得吗？
哦，我不知道 - 抱歉

【解决方案1】：

150kb 的大小对我来说似乎是合理的，因为您要导入所有 polyfill。因此 webpack4 的 tree-shaking 特性不会删除任何未使用的代码，因为一切都被使用了。

我可能假设声称整个包大小的来源应该是 ~60-80kb，这意味着缩小 + 压缩后的大小。

您是否阅读了如何正确使用@babel/polyfill 库的instructions？ recommends 使用 @babel/preset-env 仅导入生产目标所需的 polyfill。这可能会大大减少你的包的大小。

【讨论】：

您写道：“因此，webpack4 的 tree-shaking 功能不会删除任何未使用的代码，因为一切都已使用。” 可以理解不同的方式，但通常，这样做我们有任何第三方工具可以检查“所有东西都在乐队中使用”吗？
你不需要检查......它运行代码，所以它需要它：github.com/babel/babel/blob/master/packages/babel-polyfill/src/… webpack 绝对会包含使用“import 'abc'”运行的任何内容
tree-shaking 功能确实会检查你的包中是否有未使用的代码并将其删除，但在这种情况下，会使用 polyfill 库中的所有内容，因为所有内容都是导入的。正如我所写的，@babel/preset-env 可以帮助您不导入目标环境不需要的 polyfill。
好的。看来我明白了。 “未使用”表示“未导入”。但我不明白为什么转译器不能报告哪些 polyfill 没有使用，因为他肯定知道哪些被使用（在转译阶段）。或者 Babel 可以做到吗？