如果你在使用 Babel 的 polyfill 时，你可能会遇到一个问题：你的项目文件增加了数千个行并且增加了巨大的代码，这在生产环境中不是一个很好的选择。这篇文章将探讨这种情况，并介绍如何解决。
什么是 Babel polyfill？
在开始讨论问题之前，先来看看 Babel polyfill 是什么。在使用 ECMAScript 新的语法或 API 时，你需要使用 polyfill 来提供向后兼容的支持。举个例子，如果你在不支持 Promise 的浏览器中写了 Promise，你需要使用 Promise 的 polyfill 来支持该浏览器。
Babel polyfill 可以为你提供这些 polyfill，同时也包括了一些额外的特性，如本地化和国际化库和一些 helper 方法等。
Babel polyfill 能够让你在现代浏览器中使用未来的 JavaScript 特性。
Babel polyfill 增加文件大小的问题
然而，当你在使用 Babel polyfill 时，你可能会面临添加了数千个行的问题，并且增加了巨大的代码。这可能会给你的网页加载时间造成不必要的影响，并且可能会增加安全漏洞。
为了清楚地说明这个问题，我们来看一下下面这段代码：
------ -----------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ -------- ---- -------------
------ --- ---- -------------------
----------------
--------- ------------------------------
---- --
------------
-------------------------------
--在这个例子中，我们导入了 Babel polyfill，然后我们加载了 React、Redux 等一堆依赖和我们自己的组件。当这个应用程序被打包并压缩后，它的大小将会增加很多。
解决方案
使用 babel-runtime 和 babel-plugin-transform-runtime
使用 babel-runtime 和 babel-plugin-transform-runtime 可以有效地减少打包后的代码体积。
babel-runtime 是一个集成运行时的工具包。在你的代码中使用这些 helper 将会引用它们的实现，而不是复制粘贴到你的代码中。这将会极大地减少你的代码体积，同时也可以更好地维护你的代码。
babel-plugin-transform-runtime 是一个 Babel 插件，它可以自动地将你的源代码中使用的 helper 提取成公共代码，并将其转换成使用 babel-runtime 的方式。
babel-runtime 和 babel-plugin-transform-runtime 的使用方法如下：
首先安装依赖：
--- ------- ---------- ------------- ------------------------------
然后在 .babelrc 中配置：
- ---------- - - -------------------- - ---------- ----- ----------- ------ -------------- ----- ------------- --------------- - - - -需要注意的是，Babel 7 中的配置文件默认文件名为 babel.config.js，如果是 Babel 6，请使用 .babelrc。
在代码中使用 helper：
------ - ---------- - ---- ------------------------------------- -------- -------- - -- ----------------- - -- --- - - ------ ------- ----
需要注意的是，使用 babel-runtime 的具体操作不在本文的范围内。如果你想了解更多信息，请参考官方文档。
按需导入 polyfill
如果你只需要支持一部分浏览器，那么可以使用 babel-preset-env 的 useBuiltins 选项按需导入 polyfill。
下面是一个例子：
-
---------- -
-
------
-
-------------- --------
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-在这个例子中，我们使用了 useBuiltIns 选项并指定了 usage，这意味着 Babel 会根据代码中使用的特性来自动导入对应的 polyfill。
需要注意的是，对于一些浏览器中未实现的特性，例如 Object.create，Babel 将会默认安装完整的 polyfill，这可能会使你的代码增加太多冗余的代码。
这时你可以使用官方提供的 shim，或使用浏览器本身提供的 polyfill。
排除不必要的 polyfill
在有些情况下，你可能不需要某些 polyfill，这时你可以通过在 babel-preset-env 中排除这些 polyfill。
-
---------- -
-
------
-
-------------- --------
---------- ------------------------- --------------------------------
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-在这个例子中，我们排除了 transform-regenerator 和 transform-async-to-generator。需要注意的是，这个选项仅能排除比较显然的 polyfill，如果你使用的是 less-known fork 对象，那么它可能无法自动检测并排除。
总结
在使用 Babel polyfill 时，你可能会面临代码体积增大的问题。本文介绍了使用 babel-runtime、按需导入 polyfill 和排除不必要的 polyfill 这三种解决方案。
总的来说，如果你需要使用 polyfill，强烈建议使用第二种方法：按需导入 polyfill，这不仅使你的代码更加健壮，同时也避免了浏览器下载不必要的代码铺满了页面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651e968d95b1f8cacd6453da