1. 简介
Babel 是一个在代码编译过程中转换 ECMAScript 2015+ 代码的工具，可以将新的 JavaScript 语法转换为向后兼容的版本，从而在更广泛的环境中运行。通过 Babel 转换，前端开发者可以更加自由地使用最新的语法，并且向后兼容，不必担心将代码部署到环境不支持这些语法的浏览器上。
然而，Babel 的编译过程不可避免地影响代码性能，因此，优化 Babel 编译过程对于全栈开发者尤为重要。
本文将介绍一些优化 Babel 编译过程的技巧，并且对于这些技巧做性能测试和对比。
2. 优化 Babel 编译过程的技巧
2.1 根据需求调整 Babel 插件
Babel 的插件可以帮助我们转换特定的语法，但是在实际使用中，我们并不会用到所有的插件。因此我们需要根据我们的需要来选择具体的插件，避免无用的插件的耗时。
当你需要把 ES5 代码转化为 ES6 代码的时候，可以使用 "@babel/preset-env" 和 "@babel/plugin-transform-runtime" 这两个插件，但是，如果你是要编译一个只使用了部分 ES6 新特性的项目，你可以通过配置 "@babel/preset-env" 插件的选项，可以只包含你所需的转换。
2.2 减小文件的数量
Babel 编译所需要的时间和转换的代码行数直接相关，因此，如果你的代码可以分为多个文件，那么每个文件中的代码行数较少， Babel 就能更快地编译。
2.3 不要忽略 exclude 字段
在配置 webpack 的 Babel-loader 时，可以通过配置 exclude 字段来排除不需要编译的文件夹。这个过程会根据你的设置在文件系统上进行查找，极度影响编译的速度，因此配置正确也能让编译更快。
2.4 启用缓存
Babel 编译过程中有一个缓存机制，可以避免再次编译已经编译过的文件，在多次编译中，这个缓存机制可以显著地提高编译速度。
启用 Babel 缓存的方法是在 Babel-loader 的 options 中配置 cacheDirectory 字段。
3. 性能测试
我们通过下面这份代码测试几种不同配置和选项的 Babel 编译速度：
-- -------------------- ---- -------
----- --- - -
-
--- --
----- -------
---- ---
--
-
--- --
----- -------
---- ---
--
--
----- ------ - ------------- --------- -- --
--------
------- ---
----
--------------------我们使用了 '@babel/preset-env', '@babel/plugin-transform-runtime' 和 '@babel/plugin-proposal-object-rest-spread' 来编译它。
3.1 启动缓存
我们使用了 babel-loader 对代码进行了转换，并且启用了缓存：
-- -------------------- ---- -------
-
------- ---------------
-------- -
--------------- -----
-------- -
--------------------- - -------------- ------- --
--
-------- -
----------------------------------
-------------------------------------------
-
-
-编译时间为 962 毫秒：
3.2 关闭缓存
我们再次对同样的代码进行编译，不过，这次关闭了缓存：
-- -------------------- ---- -------
-
------- ---------------
-------- -
--------------- ------
-------- -
--------------------- - -------------- ------- --
--
-------- -
----------------------------------
-------------------------------------------
-
-
-编译时间为 4,009 毫秒：
3.3 变换仅仅需要的代码
这一次，我们通过配置 "@babel/preset-env" 来仅仅转换需要转换的语法，而不是全部的 ES6 代码：
-- -------------------- ---- -------
-
------- ---------------
-------- -
--------------- -----
-------- -
--------------------- -
------------ --------
-------- - ------- ---- --
-------- ------
--
--
-------- -
----------------------------------
-------------------------------------------
-
-
-编译时间为 571 毫秒：
3.4 关闭不必要的插件
我们通过配置 "@babel/preset-env" 的 modules 选项来禁用 Babel 的模块打包，从而避免了 '@babel/plugin-transform-modules-commonjs' 的使用：
-- -------------------- ---- -------
-
------- ---------------
-------- -
--------------- -----
-------- -
--------------------- -
------------ --------
-------- - ------- ---- --
-------- ------
--
--
-------- -
----------------------------------
-------------------------------------------
-
-
-编译时间为 261 毫秒：
4. 结论
经过上述测试，我们可以得出结论：
- 启用缓存是最快的，可以将编译时间降低至几毫秒。
- 通过选择合适的转换选项，可以将编译时间减少一半。
- 避免使用不必要的插件是一个很好的优化方式。
总之，根据项目不同选用合适的插件和转换选项，才能得到更流畅的编译体验，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f50335c5c563ced569e388