什么是 esbuild？

esbuild 是一款基于 Go 語言開發(fā)的 JavaScript 構(gòu)建打包工具，以其卓越的性能著稱。相比傳統(tǒng)的構(gòu)建工具（如 Webpack），esbuild 在打包速度上有著顯著的優(yōu)勢，能夠?qū)⒋虬俣忍嵘?10 到 100 倍。這對于那些經(jīng)常受到 Webpack 緩慢打包速度困擾的開發(fā)人員來說，無疑是一個巨大的福音。

為什么 esbuild 能這么快？

1. Golang 開發(fā)：

   • Go 語言在 CPU 密集型任務(wù)中表現(xiàn)出色，而傳統(tǒng)的 JavaScript 構(gòu)建工具并不適合這類場景。

2. 多核并行：

   • Go 語言具有多線程運行能力，可以充分利用多核 CPU 的性能，將解析、編譯和生成的工作并行化。

3. 從零開始：

   • esbuild 從一開始就注重性能優(yōu)化，不依賴第三方庫，使用一致的數(shù)據(jù)結(jié)構(gòu)，避免了不必要的數(shù)據(jù)轉(zhuǎn)換開銷。

4. 內(nèi)存的有效利用：

   • 在 JS 開發(fā)的傳統(tǒng)打包工具當中一般會頻繁地解析和傳遞抽象語法樹( AST )數(shù)據(jù)，比如 字符串 -> TS -> JS -> 字符串，然后字符串 -> JS -> 舊的JS -> 字符串，然后字符串 -> JS -> minified JS -> 字符串，這其中會涉及復雜的編譯工具鏈，比如 webpack -> babel -> terser，每次接觸到新的工具鏈，都得重新解析 AST，導致大量的內(nèi)存占用。

esbuild 僅觸及整個JavaScript AST 3次：

1. 進行詞法分析，解析，作用域設(shè)置和聲明符號的過程
2. 綁定符號，最小化語法。比如：將 JSX / TS轉(zhuǎn)換為 JS。
3. AST生成JS，source map生成。

當 AST 數(shù)據(jù)在CPU緩存中仍然處于活躍狀態(tài)時，會最大化AST數(shù)據(jù)的重用。

為什么 esbuild 還沒有一統(tǒng)江山？

盡管 esbuild 有許多優(yōu)點，但它也存在一些明顯的不足：

• 缺乏 AST 操作能力：

  • 無法對打包產(chǎn)物進行降級到 ES5 及以下，不支持低版本瀏覽器。

• Code Splitting 功能還在計劃中：

  • 當前版本的 esbuild 還不支持代碼分割。

• 沒有 TypeScript 類型檢測：

  • 不像 Webpack 集成了 TypeScript 支持，esbuild 需要額外的配置才能支持 TypeScript。

• 默認不支持 Vue、Angular 等框架的代碼文件格式：

  • 需要通過插件來實現(xiàn)對這些框架的支持，增加了開發(fā)成本。

為什么要學習 esbuild？

esbuild 之所以受到關(guān)注，很大程度上是因為它在 Vite 中的應(yīng)用。esbuild是組成Vite的兩架馬車之一。

Vite 是一個現(xiàn)代的前端構(gòu)建工具，其核心理念是“快速啟動”和“按需編譯”。esbuild 是 Vite 的重要組成部分之一，主要負責以下幾個方面：

1. 依賴預(yù)構(gòu)建：

   • 作為 Bundle 工具，預(yù)構(gòu)建第三方依賴，減少開發(fā)時的加載時間。

2. 單文件編譯：

   • 作為 TypeScript 和 JSX 編譯工具，支持現(xiàn)代 JavaScript 語法。

3. 代碼壓縮：

   • 作為壓縮工具，優(yōu)化最終的打包產(chǎn)物。

什么是 no-bundle？

ESM是JavaScript提出的官方標準化模塊系統(tǒng)，不同于之前的CJS，AMD，CMD等等，ESM提供了更原生以及更動態(tài)的模塊加載方案，最重要的就是它是瀏覽器原生支持的，也就是說我們可以直接在瀏覽器中去執(zhí)行import，動態(tài)引入我們需要的模塊，而不是把所有模塊打包在一起。

Vite 是一個提倡 no-bundle 的構(gòu)建工具，相比于傳統(tǒng)的 Webpack，能做到開發(fā)時的模塊按需編譯，而不用先打包完再加載。

什么是依賴預(yù)構(gòu)建？

模塊代碼其實分為兩部分，一部分是源代碼，也就是業(yè)務(wù)代碼，另一部分是第三方依賴的代碼，即node_modules中的代碼。所謂的no-bundle只是對于源代碼而言，對于第三方依賴而言，我們基本不會去改變他，Vite 還是選擇 bundle(打包)，這個部分，就依賴于esbuild。

但是關(guān)鍵點是，為什么在開發(fā)階段我們要對第三方依賴進行預(yù)構(gòu)建? 如果不進行預(yù)構(gòu)建會怎么樣？

首先 Vite 是基于瀏覽器原生 ES 模塊規(guī)范實現(xiàn)的 Dev Server，不論是應(yīng)用代碼，還是第三方依賴的代碼，理應(yīng)符合 ESM 規(guī)范才能夠正常運行。但是，我們沒有辦法控制第三方的打包規(guī)范。還有相當多的第三方庫仍然沒有 ES 版本的產(chǎn)物。

此外，ESM還有一個比較重要的問題——請求瀑布流問題。ESM的每個import都會觸發(fā)一次新的文件請求，因此在依賴層級深、涉及模塊數(shù)量多的情況下，會觸發(fā)很多個網(wǎng)絡(luò)請求，巨大的請求量加上 Chrome 對同一個域名下只能同時支持 6個 HTTP 并發(fā)請求的限制，導致頁面加載十分緩慢，與 Vite 主導性能優(yōu)勢的初衷背道而馳。

在進行依賴的預(yù)構(gòu)建之后，這種第三方庫的代碼被打包成了一個文件，這樣請求的數(shù)量會驟然減少，頁面加載也快了許多

總結(jié)

esbuild 以其卓越的性能和高效的構(gòu)建流程，成為現(xiàn)代前端開發(fā)的重要工具之一。雖然它還有一些不足，但隨著社區(qū)的發(fā)展和技術(shù)的進步，這些問題正在逐步得到解決。Vite 作為 esbuild 的重要應(yīng)用場景，展示了 esbuild 在實際項目中的巨大潛力。