面试官：Vite 为什么这么快？？？

点击下方“前端开发爱好者”，选择“设为星标”

今天就通过本文和大家一起聊一聊 Vite 是怎样利用 Esbuild 来提升性能的。

初探 Esbuild

首先，我们先带大家简单了解一下 Esbuild，其官方地址是: Esbuild^[1]。

什么是 Esbuild

Esbuild 是一款基于 Go 语言开发的 javascript 打包工具，最大的一个特征就是快。

通过官网提供的一张图，我们可以清晰的看到 Esbuild 的表现是多么优秀:

同样规模的项目，使用 Esbuild 可以将打包速度提升 10 – 100 倍，这对广大一直饱受 Webpack 缓慢打包速度折磨的开发人员来说，简直就是福音。

而 Esbuild 之所以能这么快，主要原因有两个:

• Go 语言开发，可以多线程打包，代码直接编译成机器码；

  Webpack 一直被人诟病构建速度慢，主要原因是在打包构建过程中，存在大量的 resolve、load、transform、parse 操作，而这些操作通常是通过 javascript 代码来执行的。

  要知道，javascript 并不是什么高效的语言，在执行过程中要先编译后执行，还是单线程并且不能利用多核 cpu 优势，和 Go 语言相比，效率很低。

• 可充分利用多核 cpu 优势；

关键 API – transfrom & build

Esbuild 并不复杂。它对外提供了两个 API – transform 和 build，使用起来非常简单。

transfrom，转换的意思。通过这个 api，我们可以将 ts、jsx、tsx 等格式的内容转化为 js。transfrom 只负责文件内容转换，并不会生成一个新的文件。

build，构建的意思，根据指定的单个或者多个入口，分析依赖，并使用 loader 将不同格式的内容转化为 js 内容，生成一个或多个 bundle 文件。

这两个 API 的使用方式:

const res = await esbuild.transform(code, options) // 将 code 转换为指定格式的内容

esbuild.build(options) // 打包构建

关于使用 transform、build 需要传入的具体配置项，本文就不详细说明了，官网对这一块儿有很详细的说明，感兴趣的同学可以去官网 – simple-options^[2]、Advanced options^[3] 看看，也可以自己动手试试。

plugin

和 Webpack、Rollup 等构建工具一样，Esbuild 也提供了供外部使用的 plugin，使得我们可以介入构建打包过程。

在这里要说明一点，只有 build 这个 API 的入参中可以配置 plugin，transform 不可以。

一个标准的 plugin 的标准格式如下:

let customerPlugin = {
    name: 'xxx',
    setup: (build) => {
        build.onResolve({ filter: '', namespace: '' }, args => { ...});
        build.onLoad({ filter: '', namespace: ''}, args => { ... });
        build.onStart(() => { ... });
        build.onEnd((result) => { ... });
    }
}

其中，setup 可以帮助我们在 build 的各个过程中注册 hook。

Esbuild 对外提供的 hook 比较简单，总共 4 个:

• onResolve, 解析 url 时触发，可自定义 url 如何解析。如果 callback 有返回 path，后面的同类型 callback 将不会执行。所有的 onResolve callback 将按照对应的 plugin 注册的顺序执行。

• onLoad, 加载模块时触发，可自定义模块如何加载。如果 callback 有返回 contents，后面的同类型 callback 将不会执行。所有的 onLoad callback 将按照对应的 plugin 注册的顺序执行。

• onStart, 每次 build 开始时都会触发，没有入参，因此不具有改变 build 的能力。多个 plugin 的 onStart 并行执行。

• onEnd, 每次 build 结束时会触发，入参为 build 的结果，可对 result 做修改。所有的的 onEnd 将按照对应的 plugin 注册的顺序执行。

正是有了 onResolve、onLoad、onStart、onEnd，我们可以在 build 过程中的解析 url、加载模块内容、构建开始、构建结束阶段介入，做自定义操作。

Esbuild 在 Vite 中的巧妙使用

了解了 Esbuild 的基本用法以后，小编就带大家一起来看看 Vite 是怎么利用 Esbuild 来做预构建和内容转换的。

预构建

先来回顾一下为什么要做预构建。

原因有两点:

• 将非 ESM 规范的代码转换为符合 ESM 规范的代码；

• 将第三方依赖内部的多个文件合并为一个，减少 http 请求数量；

要完成预构建，最关键的两点是找到项目中所有的第三份依赖和对第三方依赖做合并、转换。借助 Esbuild，Vite 很轻松的实现了这两个诉求。

• 寻找第三方依赖

寻找第三方依赖的过程非常简单，分为两步:

1. 定义一个带 onResolve hook 和 onLoad hook 的 esbuild plugin；

2. 执行 esbuild 的 build 方法做打包构建；

// main.tsx
import react from 'react';
import CustomeComponent from './components/CustomeComponent';
...

• 合并、转换第三方依赖

  知道了项目中的第三方依赖以后，再做合并、转换操作就非常简单了。

  这一步， Vite 直接通过 esbuild 提供的 build 方法，指定 entryPoints 为收集到的第三方依赖，format 为 esm，再做一次打包构建。

  这一次，会对第三方依赖做合并、转换操作。打包构建完成以后，再把构建内容输出到 /node_modules/.vite/deps 下。

这样，通过两次 esbuild.build，预构建就完成了。

middlewares 中内容转换

Vite 中源文件的转换是在 dev server 启动以后通过 middlewares 实现的。

当浏览器发起请求以后，dev sever 会通过相应的 middlewares 对请求做处理，然后将处理以后的内容返回给浏览器。

middlewares 对源文件的处理，分为 resolve、load、transform、parser 四个过程：

1. resolve – 解析 url，找到源文件的绝对路径；

2. load – 加载源文件。如果是第三方依赖，直接将预构建内容返回给浏览器；如果是业务代码，继续 transform、parser。

3. transfrom – 对源文件内容做转换，即 ts -> js, less -> css 等。转换完成的内容可以直接返回给浏览器了。

4. parser – 对转换以后的内容做分析，找到依赖模块，对依赖模块做预转换 – pre transform 操作，即重复 1 – 4。

   pre transform 是 Vite 做的一个优化点。预转换的内容会先做缓存，等浏览器发起请求以后，如果已经完成转换，直接将缓存的内容返回给浏览器。

Vite 在处理步骤 3 时，是通过 esbuild.transform 实现的，对比 Webpack 使用各个 loader 处理源文件，那是非常简单、快捷的。

者：0o华仔o0 

原文链接：https://juejin.cn/post/7129802255120728100

写在最后

欢迎 长按图片加好友，我会第一时间和你分享 前端行业趋势，面试资源，学习途径等等。

添加好友备注【进阶学习】拉你进技术交流群

关注公众号后，在首页：

• 回复 面试题，获取最新大厂面试资料。
• 回复 简历，获取 3200 套 简历模板。
• 回复React实战，获取 React 最新实战教程。
• 回复 Vue实战，获取 Vue 最新实战教程。
• 回复 ts，获取 TypeScript 精讲课程。
• 回复 vite，获取 Vite 精讲课程。
• 回复 uniapp，获取 uniapp 精讲课程。
• 回复 js书籍，获取 js 进阶 必看书籍。
• 回复 Node，获取 Nodejs+koa2 实战教程。
• 回复 数据结构算法，获取数据结构算法教程。
• 回复 架构师，获取 架构师学习资源教程。
• 更多教程资源应有尽有，欢迎 关注获取

来源: 前端开发爱好者