前端编译速度优化——ESbuild

Posted 2021-09-03 帷幄庸者

本文旨在说明使用ESbuild提升前端编译构建的速度，降低前端编译的CPU开销。目前默认的webpack打包方式，随着工程的持续增大，编译也变得越来越慢，更有甚者，一个项目编译需要3～5分钟，风扇在疯狂的转，流水线已然崩溃……

问题现象

在前端项目编译时，会使用混淆和压缩技术，webpack默认是使用TerserPlugin，常常会发现编译执行到92%以后会等待很久

● Webpack ……chunk asset optimization (92%)
TerserPlugin

TerserPlugin随着产物越来越大，编译上线和 CI 的时间都越来越长，而其中 1/3 及更多的时间则是在做压缩的部分。OOM 的问题也通常来源于压缩，我们推出的 UglifyCache 和 autoExternal 方案其实大部分也是在解决产物大了之后压缩慢从而可能导致 OOM的问题。

ESbuild超神之路

「esbuild」官方的介绍：它是一个「javascript」Bundler 打包和压缩工具，它可以将「JavaScript」和「TypeScript」代码打包分发在网页上运行。

目前「esbuild」支持的功能：

加载器
压缩
打包
Tree shaking
Source map 生成
将 JSX 和较新的 JS 语法移植到 ES6
…

什么是ESbuild

ESbuild压缩速度大幅提升，来自官方的图片

ESbuild的用法(umi)

依赖安装

yarn add @umijs/plugin-esbuild

config.js配置esbuild，一般还是会转换为es5

  esbuild: {
    target: 'es5',
  },

使用效果