快捷導航

Vite使用Esbuild提升性能詳解

更新時間：2022年08月10日 09:56:39 作者：0o華仔o0

這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在上一篇為什么有人說 vite 快，有人卻說 vite 慢？中，我們提到過開發(fā)模式下使用 Vite 會有首屏性能下降的負面效果。之所以會造成首屏性能下降，一方面是 dev server 需要完成預構(gòu)建才可以響應首屏請求；另一方面是需要對請求文件做實時轉(zhuǎn)換。

也許有的同學會問，是不是針對這兩個方面做優(yōu)化，就可以提升首屏性能呢？原則上這樣是沒有問題的，而且 Vite 也是這么做的。為了能提升性能，Vite 另辟蹊徑的借助了 Esbuild 能快速完成項目打包、文件轉(zhuǎn)換的能力來進行預構(gòu)建、內(nèi)容轉(zhuǎn)換，效果非常好。

今天小編就通過本文和大家一起聊一聊 Vite 是怎樣利用 Esbuild 來提升性能的。

初探 Esbuild

首先，小編先帶大家簡單了解一下 Esbuild，其官方地址是: Esbuild。

什么是 Esbuild

Esbuild 是一款基于 Go 語言開發(fā)的 javascript 打包工具，最大的一個特征就是快。

通過官網(wǎng)提供的一張圖，我們可以清晰的看到 Esbuild 的表現(xiàn)是多么優(yōu)秀:

同樣規(guī)模的項目，使用 Esbuild 可以將打包速度提升 10 - 100 倍，這對廣大一直飽受 Webpack 緩慢打包速度折磨的開發(fā)人員來說，簡直就是福音。

而 Esbuild 之所以能這么快，主要原因有兩個:

Go 語言開發(fā)，可以多線程打包，代碼直接編譯成機器碼；
Webpack 一直被人詬病構(gòu)建速度慢，主要原因是在打包構(gòu)建過程中，存在大量的 resolve、load、transform、parse 操作(詳見為什么有人說 vite 快，有人卻說 vite 慢？- 快速的冷啟動 )，而這些操作通常是通過 javascript 代碼來執(zhí)行的。要知道，javascript 并不是什么高效的語言，在執(zhí)行過程中要先編譯后執(zhí)行，還是單線程并且不能利用多核 cpu 優(yōu)勢，和 Go 語言相比，效率很低。
可充分利用多核 cpu 優(yōu)勢；

關(guān)鍵 API - transfrom & build

Esbuild 并不復雜。它對外提供了兩個 API - transform 和 build，使用起來非常簡單。

transfrom，轉(zhuǎn)換的意思。通過這個 api，我們可以將 ts、jsx、tsx 等格式的內(nèi)容轉(zhuǎn)化為 js。 transfrom 只負責文件內(nèi)容轉(zhuǎn)換，并不會生成一個新的文件。

build，構(gòu)建的意思，根據(jù)指定的單個或者多個入口，分析依賴，并使用 loader 將不同格式的內(nèi)容轉(zhuǎn)化為 js 內(nèi)容，生成一個或多個 bundle 文件。

這兩個 API 的使用方式:

const res = await esbuild.transform(code, options) // 將 code 轉(zhuǎn)換為指定格式的內(nèi)容
esbuild.build(options) // 打包構(gòu)建

關(guān)于使用 transform、build 需要傳入的具體配置項，本文就不詳細說明了，官網(wǎng)對這一塊兒有很詳細的說明，感興趣的同學可以去官網(wǎng) - simple-options、Advanced options 看看，也可以自己動手試試。

plugin

和 Webpack、Rollup 等構(gòu)建工具一樣，Esbuild 也提供了供外部使用的 plugin，使得我們可以介入構(gòu)建打包過程。

在這里要說明一點，只有 build 這個 API 的入?yún)⒅锌梢耘渲?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 時觸發(fā)，可自定義 url 如何解析。如果 callback 有返回 path，后面的同類型 callback 將不會執(zhí)行。所有的 onResolve callback 將按照對應的 plugin 注冊的順序執(zhí)行。
onLoad, 加載模塊時觸發(fā)，可自定義模塊如何加載。如果 callback 有返回 contents，后面的同類型 callback 將不會執(zhí)行。所有的 onLoad callback 將按照對應的 plugin 注冊的順序執(zhí)行。
onStart, 每次 build 開始時都會觸發(fā)，沒有入?yún)?，因此不具有改?build 的能力。多個 plugin 的 onStart 并行執(zhí)行。
onEnd, 每次 build 結(jié)束時會觸發(fā)，入?yún)?build 的結(jié)果，可對 result 做修改。所有的的 onEnd 將按照對應的 plugin 注冊的順序執(zhí)行。

正是有了 onResolve、onLoad、onStart、onEnd，我們可以在 build 過程中的解析 url、加載模塊內(nèi)容、構(gòu)建開始、構(gòu)建結(jié)束階段介入，做自定義操作。

Esbuild 在 Vite 中的巧妙使用

了解了 Esbuild 的基本用法以后，小編就帶大家一起來看看 Vite 是怎么利用 Esbuild 來做預構(gòu)建和內(nèi)容轉(zhuǎn)換的。

預構(gòu)建

先來回顧一下為什么要做預構(gòu)建。

原因有兩點:

將非 ESM 規(guī)范的代碼轉(zhuǎn)換為符合 ESM 規(guī)范的代碼；
將第三方依賴內(nèi)部的多個文件合并為一個，減少 http 請求數(shù)量；

要完成預構(gòu)建，最關(guān)鍵的兩點是找到項目中所有的第三份依賴和對第三方依賴做合并、轉(zhuǎn)換。借助 Esbuild，Vite 很輕松的實現(xiàn)了這兩個訴求。

尋找第三方依賴

尋找第三方依賴的過程非常簡單，分為兩步:

定義一個帶 onResolve hook 和 onLoad hook 的 esbuild plugin；

執(zhí)行 esbuild 的 build 方法做打包構(gòu)建；

和 Webpack、Rollup、Parcel 等構(gòu)建工具一樣，Esbuild 在做打包構(gòu)建時也要構(gòu)建模塊依賴圖 - module graph(具體過程可參考為什么有人說 vite 快，有人卻說 vite 慢？- 快速的冷啟動中 Webpack 構(gòu)建 module graph)。

在構(gòu)建 module graph 時，第一步就是解析模塊的絕對路徑，這個時候就會觸發(fā) onResolve hook。在 onResolve hook 觸發(fā)時，會傳入模塊的路徑。根據(jù)模塊的路徑，我們就可以判斷出這個模塊是第三方依賴還是業(yè)務(wù)代碼。

舉個 ??，

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

在對 main.tsx 的內(nèi)容做 parser 操作時，能知道 main.tsx 依賴 react 和 CustomeComponent，然后開始解析 react 和 CustomeComponent。

解析 react、CustomeComponent 時，會觸發(fā) onResolve hook，入?yún)⒎謩e為 'react' 和 './components/CustomeComponent'。

根據(jù)入?yún)?，我們可以很清楚的區(qū)分 'react' 是第三方依賴，'./components/CustomeComponet' 是業(yè)務(wù)代碼。

這樣，esbuild 完成構(gòu)建，項目中的第三方依賴也就收集完畢了。所有的第三方依賴會收集到一個 deps 列表中。

合并、轉(zhuǎn)換第三方依賴
知道了項目中的第三方依賴以后，再做合并、轉(zhuǎn)換操作就非常簡單了。
這一步， Vite 直接通過 esbuild 提供的 build 方法，指定 entryPoints 為收集到的第三方依賴，format 為 esm，再做一次打包構(gòu)建。
這一次，會對第三方依賴做合并、轉(zhuǎn)換操作。打包構(gòu)建完成以后，再把構(gòu)建內(nèi)容輸出到 /node_modules/.vite/deps 下。

這樣，通過兩次 esbuild.build，預構(gòu)建就完成了。

middlewares 中內(nèi)容轉(zhuǎn)換

Vite 中源文件的轉(zhuǎn)換是在 dev server 啟動以后通過 middlewares 實現(xiàn)的。

當瀏覽器發(fā)起請求以后，dev sever 會通過相應的 middlewares 對請求做處理，然后將處理以后的內(nèi)容返回給瀏覽器。

middlewares 對源文件的處理，分為 resolve、load、transform、parser 四個過程：

resolve - 解析 url，找到源文件的絕對路徑；
load - 加載源文件。如果是第三方依賴，直接將預構(gòu)建內(nèi)容返回給瀏覽器；如果是業(yè)務(wù)代碼，繼續(xù) transform、parser。
transfrom - 對源文件內(nèi)容做轉(zhuǎn)換，即 ts -> js, less -> css 等。轉(zhuǎn)換完成的內(nèi)容可以直接返回給瀏覽器了。
parser - 對轉(zhuǎn)換以后的內(nèi)容做分析，找到依賴模塊，對依賴模塊做預轉(zhuǎn)換 - pre transform 操作，即重復 1 - 4。
pre transform 是 Vite 做的一個優(yōu)化點。預轉(zhuǎn)換的內(nèi)容會先做緩存，等瀏覽器發(fā)起請求以后，如果已經(jīng)完成轉(zhuǎn)換，直接將緩存的內(nèi)容返回給瀏覽器。