上一小节，我们介绍了 Vite 的双引擎架构。不可否认，作为 Vite 的双引擎之一，Esbuild 在很多关键的构建阶段(如依赖预编译、TS 语法转译、代码压缩)让 Vite 获得了相当优异的性能，是 Vite 高性能的得力助手。不论是在 Vite 的配置项还是源码实现中，都包含了不少 Esbuild 本身的基本概念和高阶用法。因此，要深入掌握 Vite，学习 Esbuild 必不可少。

本小节，我们将目光专注于 Esbuild 本身，一起学习它的基本概念和功能使用，同时通过实战的方式，开发一个完整的 Esbuild 插件。

# 为什么 Esbuild 性能极高？

Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以比传统工具快 10~100 倍。那么，它是如何达到这样超高的构建性能的呢？主要可以概括为四个方面:

1. 使用 Golang 开发，构建逻辑代码直接被编译为原生机器码，而不用像 JS 一样先代码解析为字节码，然后转换为机器码，大大节省了程序运行时间。
2. 多核并行。内部打包算法充分利用多核 CPU 优势，所有的步骤尽可能并行，这也是得益于 Go 当中多线程共享内存的优势。
3. 从零造轮子。 几乎没有使用任何第三方库，所有逻辑自己编写，大到 AST 解析，小到字符串的操作，保证极致的代码性能。
4. 高效的内存利用。Esbuild 中从头到尾尽可能地复用一份 AST 节点数据，而不用像 JS 打包工具中频繁地解析和传递 AST 数据（如 string -> TS -> JS -> string)，造成内存的大量浪费。

# Esbuild 功能使用

接下来我们正式进入 Esbuild 功能使用的学习中，首先我们执行pnpm init -y新建一个项目, 然后通过如下的命令完成 Esbuild 的安装:

pnpm i esbuild

使用 Esbuild 有两种方式，分别是 命令行调用和代码调用。

# 1. 命令行调用

首先是命令行方式调用，也是最简单的使用方式。我们先来写一些示例代码，新建src/index.jsx文件，内容如下:

// src/index.jsx
import Server from "react-dom/server";

let Greet = () => <h1>Hello, juejin!</h1>;
console.log(Server.renderToString(<Greet />));

注意安装一下所需的依赖，在终端执行如下的命令:

pnpm install react react-dom

接着到package.json中添加build脚本:

 "scripts": {
    "build": "./node_modules/.bin/esbuild src/index.jsx --bundle --outfile=dist/out.js"
 },