一、前語(yǔ)
前端工程領(lǐng)域最近一年出了不少新的工具，這些新工具都運(yùn)用了一些新技術(shù)或者跨領(lǐng)域技術(shù)，在性能上實(shí)現(xiàn)了一些突破，為開(kāi)發(fā)者帶來(lái)更快更好用的開(kāi)發(fā)體驗(yàn)。
二、背景
在瀏覽器支持原生 ES 模塊之前，JavaScript 并沒(méi)有提供的原生機(jī)制讓開(kāi)發(fā)者以模塊化的方式進(jìn)行開(kāi)發(fā)。于是Webpack、Rollup等構(gòu)建式打包工具應(yīng)運(yùn)而生，它們極大地改善了前端開(kāi)發(fā)者的開(kāi)發(fā)效率。
但隨著我們的應(yīng)用不斷迭代，我們需要處理的 JavaScript 代碼量也呈指數(shù)級(jí)增長(zhǎng)，包含數(shù)千個(gè)模塊的大型項(xiàng)目相當(dāng)普遍。
隨著應(yīng)用的迭代，我們開(kāi)始遇到性能瓶頸 —— 使用 JavaScript 開(kāi)發(fā)的工具通常需要等80s+甚至更長(zhǎng)時(shí)間才能啟動(dòng)開(kāi)發(fā)服務(wù)器。
啟動(dòng)開(kāi)發(fā)服務(wù)器后即使使用了 HMR(Hot Module Replacement)，文件修改后的效果也需要等待幾秒鐘才能在瀏覽器中反映出來(lái)。
如此循環(huán)往復(fù)，遲鈍的反饋會(huì)極大地影響開(kāi)發(fā)者的開(kāi)發(fā)效率以及體驗(yàn)。
三、關(guān)于vite
Vite[1]是一種全新的前端構(gòu)建工具。你可以把它理解為一個(gè)開(kāi)箱即用的開(kāi)發(fā)服務(wù)器 + 打包工具的組合，但是更輕更快。Vite 利用瀏覽器原生支持的 ES 模塊和用編譯到原生的語(yǔ)言開(kāi)發(fā)的工具(esbuild)[2]來(lái)提供一個(gè)快速且現(xiàn)代的開(kāi)發(fā)體驗(yàn)。
Vite主要具有以下特點(diǎn):
快速的冷啟動(dòng)
即時(shí)的模塊熱更新
真正的按需編譯
四、vite相較于webpcak的優(yōu)缺點(diǎn)
- 優(yōu)勢(shì)
- 快速的啟動(dòng)速度
Webpack 等傳統(tǒng)的構(gòu)建式打包工具，在冷啟動(dòng)開(kāi)發(fā)服務(wù)器時(shí)，首先都會(huì)將我們的整個(gè)代碼庫(kù)中的源代碼和node_modules進(jìn)行轉(zhuǎn)換、編譯(Babel、PostCSS...)和打包，最終將打包好的文件推送到我們的瀏覽器。
vite、snowpack這類非構(gòu)建式打包工具，在冷啟動(dòng)開(kāi)發(fā)服務(wù)器時(shí)，無(wú)需分析模塊依賴，也不需要編譯，通過(guò)ES Module 自動(dòng)向依賴的資源發(fā)出請(qǐng)求，因此啟動(dòng)速度非常快。當(dāng)瀏覽器請(qǐng)求某個(gè)模塊時(shí)，再根據(jù)需要對(duì)模塊內(nèi)容進(jìn)行編譯。這種按需動(dòng)態(tài)編譯的方式，極大的縮減了編譯時(shí)間，項(xiàng)目越復(fù)雜、模塊越多，非構(gòu)建式打包工具的優(yōu)勢(shì)越明顯。
- 即時(shí)響應(yīng)的熱更新
在 Webpack 中，當(dāng)代碼某個(gè)依賴發(fā)生了改變，webpcak 會(huì)檢查當(dāng)前的依賴關(guān)系并重新打包，當(dāng)我們的依賴關(guān)系復(fù)雜時(shí)，就算只修改一個(gè)文件，熱更新的速度也會(huì)越來(lái)越慢。在實(shí)踐中我們發(fā)現(xiàn)，即使是 HMR ，更新速度會(huì)隨著應(yīng)用規(guī)模的增長(zhǎng)而顯著下降。
在 Vite 中，HMR 是在原生 ESM 上執(zhí)行的。當(dāng)編輯一個(gè)文件時(shí)，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈?zhǔn)Вù蠖鄶?shù)時(shí)候只需要模塊本身），使 HMR 更新始終快速，無(wú)論應(yīng)用的大小。同時(shí) Vite 利用 HTTP 來(lái)加速整個(gè)頁(yè)面的重新加載，對(duì)于源碼模塊的請(qǐng)求會(huì)根據(jù) 304 狀態(tài)碼進(jìn)行協(xié)商緩存，而外部依賴模塊的請(qǐng)求則會(huì)設(shè)置為強(qiáng)緩存，因此一旦被緩存它們將不需要再次請(qǐng)求。
Vite 與
create-react-app在 Repl.it 上啟動(dòng) React 應(yīng)用程序的視頻比較：
- 缺點(diǎn)
- 生態(tài)
生態(tài)這一塊，Webpack 相較于 Vite 優(yōu)勢(shì)明顯，Webpcak 的社區(qū)中有非常豐富的loader和plugin，Vite這邊插件社區(qū)起步較晚，插件數(shù)量會(huì)比較少；
好在，Vite 插件開(kāi)發(fā)起來(lái)非常簡(jiǎn)單。Vite 在插件設(shè)計(jì)上擴(kuò)展了 Rollup 的插件接口，開(kāi)發(fā)者通過(guò)閱讀 Rollup 的插件文檔，很快就能開(kāi)發(fā)出標(biāo)準(zhǔn)的 Vite 插件了。
- 打包構(gòu)建
在構(gòu)建這塊，Vite 在開(kāi)發(fā)服務(wù)器與產(chǎn)品最終構(gòu)建結(jié)果沒(méi)有 Webpack 一致性強(qiáng)。
主要原因是我們?yōu)榱嗽谏a(chǎn)環(huán)境獲得最佳的加載性能和兼容性，還是需要將代碼進(jìn)行tree-shaking、懶加載和 chunk 分割（以獲得更好的緩存），所以 Vite 選擇了 Rollup[3] 進(jìn)行產(chǎn)品最終構(gòu)建打包。
五、vite在vue中的使用姿勢(shì)
Vite 將為 Vue 提供第一優(yōu)先級(jí)支持
- vue@2.x + vite：vue-cli-plugin-vite
- vue@3.x + vite: @vitejs/plugin-vue
- vue@3.x + JSX + vite: @vitejs/plugin-vue-jsx
