背景
随着前端开发的发展，JavaScript 语言的使用越来越广泛。而现代化的 JavaScript 开发则需要使用 ES6+ 的语言特性和各种 npm 包，这就需要使用打包工具打包，webpack 正是现在最热门的打包工具之一。而 babel 作为一个 ES6+ 到 ES5 的转译器，经常被用来预编译代码，从而允许我们在大多数浏览器上运行代码。然而，在 webpack 打包较大的项目时，预编译过程会消耗大量的时间，从而使开发效率受到很大的影响。
本文就是要介绍如何让 babel 更快地预编译，以提高 webpack 打包的速度，并降低编译过程中的内存消耗。
生产环境与开发环境
在 webpack 中，有两种环境：开发环境和生产环境。这两种环境下的打包，所需的项目依赖和 babel 预编译的内容都是不一样的。
在开发环境下，一般需要使用 devServer 启动服务，在浏览器中采用热更新的方式，实时查看代码的变化。而在生产环境下，则需要保证打包出来的文件可以在所有浏览器中正常运行，并且需要对代码进行混淆、压缩和优化等操作。
在这两种环境下，我们需要对 babel 的预编译进行不同的配置，并采取不同的优化策略。
基本优化策略
缓存
由于 babel 每次都需要编译整个代码，所以在每次打包时，如果没有使用缓存，则 babel 的编译时间将非常长。因此，推荐在 webpack 中启用 babel 的缓存功能。这样，只有没有被缓存的文件才会重新编译，从而减少了编译时间。
以下是一个例子：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- ---------- ---- - ------- --------------- -------- - --------------- ----- -- -- -- -- -- --展开代码
使用上述配置后，babel 会将编译过的文件保存在硬盘上，下次编译时会校验文件的修改时间，如果文件没有修改，则直接使用之前的缓存。
优化依赖
为了使 babel 的编译速度更快，在设置 babel 配置时，应该尽量减少需要转换的依赖。一方面，减少依赖能够减少 babel 的工作量，从而提高编译速度，另一方面，减少依赖能够让我们更好地掌握代码的细节和性能。
以下是一份参考示例：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- ----------- -------------- -------- --------- ---- ---------- - --------- --- ----- -- - - -- --------------------- -- ---------- - ----------------------------- ------------------------------ - -展开代码
在上述配置中，对于 useBuiltIns: usage，该语句会根据代码中实际使用的方法和变量，自动引入对应的 polyfills。这样可以使代码更加精简，并且避免了无用的 polyfills 被打包进来，从而减少了代码的体积和 babel 预编译的时间。
对于 targets，该语句可以使 babel 根据目标浏览器的版本，选择不同的编译方式。这样可以避免一些浏览器不支持的特性被编译，减少了编译时间和代码的体积。
在 transform-class-properties 和 transform-object-rest-spread 这两个插件中，都采用了 babel 的 AST 分析，可以实现更精细的优化，并且不需要依赖其他的库。
多进程编译
由于 babel 的编译过程承担了很大量的 CPU 时间，因此我们可以尝试使用多进程编译的方式，将 babel 的工作分配到多个 CPU 核心中，从而提高打包的速度。
多进程编译可以通过 happypack 和 thread-loader 两个插件实现。其中 happypack 接受一个 HappyPack 插件数组，而 thread-loader 可以将一个 loader 的执行过程分配到一个 worker 线程中。具体如下：
-- -------------------- ---- ------- -- -- --------- -- ----- --------- - --------------------- ----- -- - -------------- -------------- - - ------- - ------ - - ----- -------- ---- - - ------- ------------------- -------- - --- -------- -- -- -- -- -- -- -------- - --- ----------- --- -------- -------- - - ------- --------------- -------- ----------------------------- -- -- -------- ----------------- --- -- -- -- -- ------------- -------------- - - ------- - ------ - - ----- -------- ---- - - ------- ---------------- -------- - -------- ----------------- -- -- - ------- --------------- -------- ----------------------------- -- -- -- -- -- --展开代码
使用上述配置，我们可以实现多进程编译，该配置基于 os.cpus() 函数，可以根据设备的 CPU 核心数而自适应。
结束语
本文主要介绍了如何让 babel 更快地预编译，以提高 webpack 打包的速度，并降低编译过程中的内存消耗。同时，我们对生产环境和开发环境下的配置进行了讲解，并提出了一些基本的优化策略，包括缓存、依赖优化和多进程编译。这些策略可以帮助我们更好地使用 webpack 和 babel，提高前端开发的效率和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba6eb3306f20b3a692a4cf
