当我们使用一些新的 JavaScript 语法特性时，为了兼容低版本浏览器，我们需要借助 Babel 进行语法转换。然而，Babel 实际上是将我们写的代码转换成了一些通用的代码片段，这些通用的片段在每个文件中都会被重复引入，导致了打包体积的增大。而使用 Babel 插件 transform-runtime 就可以解决这个问题。
transform-runtime 插件解决什么问题？
Babel 编译的过程中，会将一些新的语法特性，例如 let、const 等等，转化成 ES5 语法，以兼容低版本浏览器。而在这个转化的过程中，Babel 会使用一些辅助函数。这些辅助函数在每个使用了这些语法的模块里都会被引入，然后在编译后的代码里重复出现。这样会导致编译后的代码变大，并且多个模块中都有相同的代码片段，浪费了空间。
transform-runtime 插件就是解决这个问题的。它会重写被转化的代码，让代码引用到 babel-runtime 注入的公共模块里面。
如何使用 transform-runtime
安装
babel-runtime和transform-runtime插件。--- ------- ---------- ------------- --- ------- ---------- ------------------------------
在
.babelrc文件中添加配置- ---------- - - -------------------- - ----------- ------ -------------- ----- - - - -polyfill和regenerator配置项是可选的。polyfill选项决定是否引入完整的babel-polyfill，设置为false时只会引入babel-runtime。regenerator选项控制是否使用generator来编译一些语法，例如async和await。编译代码
使用
babel-cli编译代码----- ----- --------- -----
示例代码
接下来，我们以一个简单的代码示例来演示如何使用 babel-runtime 插件来减少打包体积。
----- ------- - ------- -------- ---------------------------------------
上述代码使用了 String.prototype.includes() 方法，这是 ES6 中新增的一个方法，用于判断一个字符串是否包含了另一个字符串。
现在，我们在没有使用 transform-runtime 插件的情况下，可以看到 babel-plugin-transform-es2015-xxx 会将代码变成 ES5 兼容的代码，这里我们省略掉变换后的代码。
---- -------- --- ------- - ------- -------- ---------------------------------------
可以看到，这段代码里面使用了 includes 方法，但是最终编译出来的代码里却没有 includes 方法的定义，那么这个方法的定义在哪呢？
我们可以发现，当使用了 includes 方法的代码编译成 ES5 代码时，会产生一些辅助函数，并且在每个使用了 includes 方法的文件中都会包含这些辅助函数，这会导致每个使用 includes 方法的文件都会增加体积。假设我们有 100 个文件都同时使用了 includes 方法，那么这些辅助函数就会出现 100 次，导致代码体积增加。
使用 babel-runtime 插件就可以解决这个问题，因为 babel-runtime 会把这些辅助函数放到一个独立的模块中，因此不会在编译后的代码中重复出现。
---- -------- --- --------- - ------------------------------------------------- --- ---------- - ---------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - --- ------- - ------- -------- --------------- ---------------------------- ----------
可以看到，使用了 transform-runtime 插件后，最终的代码使用了从 babel-runtime/core-js 中导入的 _includes 方法，而不是直接在每个文件中都引入一遍 _includes 方法的定义。这样可以减少代码体积，提高应用性能。
总结
使用 transform-runtime 插件可以减少打包体积，提升应用性能。插件会将编译后的代码中，每个模块复用的辅助函数从模块里面移除，而是引用到 babel-runtime 注入的公共模块中。使用时需要先安装 babel-runtime 和 transform-runtime 插件，然后在 .babelrc 文件中添加相应的配置即可。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ff606a95b1f8cacdde47b9