一、什么是 Vite 

Vite 是 vue 的作者尤雨溪在開發(fā) vue3.0 的時(shí)候開發(fā)的一個(gè) web 開發(fā)構(gòu)建工具。由于其原生 ES 模塊導(dǎo)入方式，可以實(shí)現(xiàn)閃電般的冷服務(wù)器啟動(dòng)。

二、Vite 和 Webpack 區(qū)別

Vite 優(yōu)勢：

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

Vite 劣勢：

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

其他區(qū)別：

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

 

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

三、Esbuild

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

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

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

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

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

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

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

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

transfrom，轉(zhuǎn)換的意思，將 ts、jsx、tsx 等格式的內(nèi)容轉(zhuǎn)化為 js。 transfrom 只負(fù)責(zé)文件內(nèi)容轉(zhuǎn)換，并不會生成一個(gè)新的文件。

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

Esbuild 在 Vite 中的巧妙使用

我們來看看Vite 是怎么利用 Esbuild 來做預(yù)構(gòu)建和內(nèi)容轉(zhuǎn)換的。

預(yù)構(gòu)建

為什么要做預(yù)構(gòu)建？原因有兩點(diǎn):

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

• 將第三方依賴內(nèi)部的多個(gè)文件合并為一個(gè)，減少 http 請求數(shù)量；

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

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

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

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

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

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

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

4. parser - 對轉(zhuǎn)換以后的內(nèi)容做分析，找到依賴模塊，對依賴模塊做預(yù)轉(zhuǎn)換 - pre transform 操作，即重復(fù) 1 - 4。

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

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

四、關(guān)于 Vite 的一些其他知識

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

五、Webpack 和 Rollup 區(qū)別

經(jīng)驗(yàn)法則：對于應(yīng)用使用 webpack，對于類庫使用 Rollup。

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

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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