一、什么是 Vite 

Vite 是 vue 的作者尤雨溪在開發(fā) vue3.0 的時候開發(fā)的一個 web 開發(fā)構建工具。由于其原生 ES 模塊導入方式，可以實現閃電般的冷服務器啟動。

二、Vite 和 Webpack 區(qū)別

Vite 優(yōu)勢：

1. vite 開發(fā)服務器啟動速度比 webpack 快
   webpack 會先打包，然后啟動開發(fā)服務器，請求服務器時直接給予打包結果。
   vite 在啟動開發(fā)服務器時不需要打包，也就意味著不需要分析模塊的依賴、不需要編譯，因此啟動速度非?？臁．敒g覽器請求某個模塊時，再根據需要對模塊內容進行編譯。這種按需動態(tài)編譯的方式，極大的縮減了編譯時間，項目越復雜、模塊越多，vite的優(yōu)勢越明顯。
2. 由于現代瀏覽器本身就支持ES Module，會自動向依賴的Module發(fā)出請求。vite充分利用這一點，將開發(fā)環(huán)境下的模塊文件，就作為瀏覽器要執(zhí)行的文件，而不是像webpack那樣進行打包合并。
3. vite 熱更新比 webpack 快
   在 HMR 方面，當改動了一個模塊后，vite僅需讓瀏覽器重新請求該模塊即可，不像webpack那樣需要把該模塊的相關依賴模塊全部編譯一次，效率更高。
4. vite 使用esbuild(Go 編寫) 預構建依賴，比 webpack 的 nodejs，快 10-100 倍。

Vite 劣勢：

1. 生態(tài)不及webpack，加載器、插件不夠豐富
2. 打包到生產環(huán)境時，vite使用傳統(tǒng)的 rollup（也可以自己手動安裝webpack來）進行打包
3. 項目的開發(fā)瀏覽器要支持 ES Module，而且不能識別 CommonJS 語法

其他區(qū)別：

     1. 打包原理的區(qū)別

 

     2. 項目入口文件的區(qū)別
         項目根目錄的 index.html 是 Vite 項目的入口文件，而 webpack 的入口文件是 webpack 配置 entry 中指定的 js 文件。

三、Esbuild

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

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

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

• Go 語言開發(fā)，可以多線程打包，代碼直接編譯成機器碼；

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

• 可充分利用多核 cpu 優(yōu)勢；

關鍵 API - transfrom & build

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

transfrom，轉換的意思，將 ts、jsx、tsx 等格式的內容轉化為 js。 transfrom 只負責文件內容轉換，并不會生成一個新的文件。

build，構建的意思，根據指定的單個或者多個入口，分析依賴，并使用 loader 將不同格式的內容轉化為 js 內容，生成一個或多個 bundle 文件。

Esbuild 在 Vite 中的巧妙使用

我們來看看Vite 是怎么利用 Esbuild 來做預構建和內容轉換的。

預構建

為什么要做預構建？原因有兩點:

• 將非 ESM 規(guī)范的代碼轉換為符合 ESM 規(guī)范的代碼；

• 將第三方依賴內部的多個文件合并為一個，減少 http 請求數量；

middlewares 中內容轉換

Vite 中源文件的轉換是在 dev server 啟動以后通過 middlewares 實現的。

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

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

1. resolve - 解析 url，找到源文件的絕對路徑；

2. load - 加載源文件。如果是第三方依賴，直接將預構建內容返回給瀏覽器；如果是業(yè)務代碼，繼續(xù) transform、parser。

3. transfrom - 對源文件內容做轉換，即 ts -> js, less -> css 等。轉換完成的內容可以直接返回給瀏覽器了。

4. parser - 對轉換以后的內容做分析，找到依賴模塊，對依賴模塊做預轉換 - pre transform 操作，即重復 1 - 4。

   pre transform 是 Vite 做的一個優(yōu)化點。預轉換的內容會先做緩存，等瀏覽器發(fā)起請求以后，如果已經完成轉換，直接將緩存的內容返回給瀏覽器。

Vite 在處理步驟 3 時，是通過 esbuild.transform 實現的，對比 Webpack 使用各個 loader 處理源文件，那是非常簡單、快捷的。

四、關于 Vite 的一些其他知識

• 在工程中不是所有的引用模塊都是ES寫法，可能是CommonJS 和 UMD 、AMD 等等，這個時候Vite 會進行預構建，將其轉換為ESM模塊，以支持Vite。
• 對于JSX、或者TS 等需要編譯的文件，Vite是用esbuild來進行編譯的。

五、Webpack 和 Rollup 區(qū)別

經驗法則：對于應用使用 webpack，對于類庫使用 Rollup。

如果你需要代碼拆分(Code Splitting)，或者你有很多靜態(tài)資源需要處理，再或者你構建的項目需要引入很多CommonJS模塊的依賴，那么 webpack 是個很不錯的選擇。

如果您的代碼庫是基于 ES2015 模塊的，而且希望你寫的代碼能夠被其他人直接使用，你需要的打包工具可能是 Rollup 。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司