概述
在前端开发中，我们常常需要编写 ES6+ 代码，但是由于许多浏览器并不支持这些新特性，所以需要使用 Babel 进行转义。而在使用 Babel 进行转义时，我们可能会遇到一些问题，比如引入了许多重复的 polyfill 代码，导致最终代码体积过大，甚至有些 polyfill 可能是我们用不上的。这时就需要使用 @babel/runtime 进行优化。
安装
使用 @babel/runtime 非常简单，只需要在项目中安装即可：
--- ------- ------ --------------
然后在 .babelrc 文件中添加以下配置即可：
-
---------- -
--------------------- -
-------------- --------
--------- -
--
--
---------- -
----------------------------------- -
--------- -
--
-
-其中，@babel/preset-env 主要用于将 ES6+ 代码转义为浏览器可以支持的 ES5 代码。而 @babel/plugin-transform-runtime 则替换了 Babel 自带的 helpers 和 polyfills，从 @babel/runtime 中引入，从而避免了重复打包。
使用
在项目中，我们可以使用两种方式引入 @babel/runtime。
一、全局引入
在项目入口文件中直接引入即可：
------ -----------------
这样做的好处是可以省去每个文件中都引入一遍的步骤，但同时也会带来一些问题，比如 @babel/runtime 中的模块会和 webpack 打出的模块重复，导致最终代码体积过大。
二、局部引入
我们可以在需要引入的文件中按需引入 @babel/runtime，从而避免不必要的代码：
------ - ------- - ---- ---------------------------------
在以上代码中，我们只引入了 @babel/runtime 中 Promise 的相关代码，从而避免了其他无用代码的打包。可以看出，局部引入的方式更加精细化。
效果
使用 @babel/runtime 可以有效减小代码体积，提升代码加载速度。以下是使用前后的代码体积对比：
-- --- -------- ---- -- ------- ----------- --- -- ------- -- --- -------- ---- -- ------- ----------- --- -- -------
可以看出，使用 @babel/runtime 后，项目代码体积减小了约 8 KB，而打包出的 vendors.js 体积也减小了约 20 KB，优化效果非常显著。
总结
@babel/runtime 的使用可以帮助我们更加高效的开发和优化项目，减小代码体积，提升页面加载速度。在实际项目中，我们应该根据实际情况使用全局引入或局部引入的方式，避免不必要的代码打包，从而提升代码运行效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6652fc11d3423812e4780f60