【小程序实战】- Esbuild 提升编译速度10倍背景我们团队的小程序项目是基于gulp进行构建编译打包，项目中使

背景

我们团队的小程序项目是基于gulp进行构建编译打包，项目中使用typescript开发，有更好的类型检查和推导等优势，所以需要实时进行构建编译。在正常情况下，每次编译速度在800~900ms左右，但随着项目慢慢庞大起来，那么编译速度就更加慢可能需要2s~3s，对于开发者来说等待长时间编译是难受的(更好的摸鱼)。

于是就想着怎么如何提高编译速度？而刚好团队中B端项目开发用的是基于vite搭建的脚手架模板，想必使用vuejs开发的小伙伴都有所了解过，vite它是法语单词‘轻快’的意思，而之所快，是因为使用esbuild 预构建依赖。而esbuild是使用 Go 编写，并且比以 Node.js 编写的打包器预构建依赖快 10-100 倍。

接下来，让我们了解esbuild和使用esbulid构建编译

esbuild

什么是 esbuild

esbuild 是新一代极快的 JavaScript 打包工具

esbuild以速度快而著称，耗时只有 webpack 的 2% ～3%，主要目标是开辟一个构建工具性能的新时代，创建一个易用的现代打包器

主要功能特点：

Extreme speed without needing a cache
ES6 and CommonJS modules
Tree shaking of ES6 modules
An API for JavaScript and Go
TypeScript and JSX syntax
Source maps
Minification
Plugins

为什么 esbuild 这么快

总结为什么 esbuild 这么快？（以下内容翻译来自 esbuild 官网）

它是用Go语言编写的，并可以编译为本地代码
大量使用了并行性操作，解析和代码生成全部完全并行化
代码都是自己写的，没有使用第三方依赖
高效的利于内存

这里我只是简单总结下几点，有兴趣的同学可以移步官方文档自行了解

使用 esbuild 构建

首先安装基于esbuild开发的gulp-esbuild插件

npm install gulp-esbuild

然后，在gulpfile.js编写构建任务

const { src, dest } = require('gulp')
const gulpEsbuild = require('gulp-esbuild')

function esbuild() {
  return src('./src/**/*.ts')
    .pipe(gulpEsbuild({
        outfile: '*',
        loader: {
           '.ts': 'ts',
        },
        format: 'cjs',
        tsconfig: '../tsconfig.json',
    }))
    .pipe(dest('./dist'))
}

exports.compile = compile

接下来，对比下之前使用gulp-typescript和esbuild编译构建typescript

const typescript = require('gulp-typescript');
const tsProject = typescript.createProject('tsconfig.json');

function ts() {
  return src('./src/**/*.ts')
    .pipe(tsProject())
    .pipe(dest('./dist/'));
}

exports.compile = compile

我们简单拿了四组编译速度来对比下，可以看得出esbuild完胜，且编译速度相比之前提升了10倍，简直有点不敢相信！😆😆

gulp-typescript编译速度	esbuild编译速度
768ms	85ms
1.02s	62ms
808ms	108ms
714ms	55ms

总结

单纯从编译性能的维度看，esbuild确完胜世面上所有打包框架，差距甚至能在百倍之大，esbuild快得惊人 ，为构建提效带来了曙光。但esbuild当下与未来都不能替代 webpack，毕竟有着成熟强大的生态圈支撑，更青睐来开发者。

总的来说，esbuild提供了一种新的设计思路，都值得学习了解。