作者：范文杰

來源：SegmentFault 思否社區(qū)

一、Vite 是什么

2020年4月，尤大大發(fā)了這么一個(gè)推：

隨后，2021年2月，Vite 2.0 它來了，上來就是一套組合拳：

基于 esbuild 實(shí)現(xiàn)的極速開發(fā)體驗(yàn)
多框架支持
兼容 Rollup 的插件機(jī)制與 API
SSR 支持
舊瀏覽器支持

一開始我是拒絕的，從 grunt、gulp ，到 Webpack、Rollup、Snowpack 以及若干知名不知名構(gòu)建框架，都2021了，還來？然后試用了一下，嗯，是真的香！

二、Vite 的優(yōu)勢(shì)

2.1 真 TM 快

Vite 非常非常快，對(duì)比 Vue-cli(基于 Webpack)：

示例代碼：Vue3 項(xiàng)目，10個(gè)組件

測(cè)試兩者的 dev 命令運(yùn)行耗時(shí)相差十倍，且理論上，項(xiàng)目越大性能差距越大，為什么呢？最大的原因是 Vite 在開發(fā)模式下并沒有做太多打包操作！

Webpack 啟動(dòng)后會(huì)做一堆事情，經(jīng)歷一條很長的編譯打包鏈條，從入口開始需要逐步經(jīng)歷語法解析、依賴收集、代碼轉(zhuǎn)譯、打包合并、代碼優(yōu)化，最終將高版本的、離散的源碼編譯打包成低版本、高兼容性的產(chǎn)物代碼，這可滿滿都是 CPU、IO 操作啊，在 Node 運(yùn)行時(shí)下性能必然是有問題。

而 Vite 運(yùn)行 Dev 命令后只做了兩件事情，一是啟動(dòng)了一個(gè)用于承載資源服務(wù)的 service；二是使用 esbuild 預(yù)構(gòu)建 npm 依賴包。之后就一直躺著，直到瀏覽器以 http 方式發(fā)來 ESM 規(guī)范的模塊請(qǐng)求時(shí)，Vite 才開始“按需編譯”被請(qǐng)求的模塊。

這里 Vite 預(yù)設(shè)的前提是：

現(xiàn)代瀏覽器大多數(shù)已經(jīng)原生支持 ESM 規(guī)范，構(gòu)建工具 —— 特別是開發(fā)環(huán)境下已經(jīng)沒有太大必要為了低版本兼容把大量的時(shí)間花在編譯打包上了！

這么一對(duì)比，Webpack 是啥都做了，瀏覽器只要運(yùn)行編譯好的低版本(es5)代碼就行；而 Vite 只處理問題的一部分，剩下的事情交由瀏覽器自行處理，那速度必然賊 TM 快。

除了啟動(dòng)階段跳過編譯操作之外，Vite 還有很多值得一提的性能優(yōu)化，整體梳理一下：

預(yù)編譯：npm 包這類基本不會(huì)變化的模塊，使用 Esbuild 在預(yù)構(gòu)建階段先打包整理好，減少 http 請(qǐng)求數(shù)
按需編譯：用戶代碼這一類頻繁變動(dòng)的模塊，直到被使用時(shí)才會(huì)執(zhí)行編譯操作
客戶端強(qiáng)緩存：請(qǐng)求過的模塊會(huì)被以 http 頭 max-age=31536000,immutable 設(shè)置為強(qiáng)緩存，如果模塊發(fā)生變化則用附加的版本 query 使其失效
產(chǎn)物優(yōu)化：相比于 Webpack ，Vite 直接錨定高版本瀏覽器，不需要在 build 產(chǎn)物中插入過多運(yùn)行時(shí)與模板代碼
內(nèi)置更好的分包實(shí)現(xiàn)：不需要用戶干預(yù)，默認(rèn)啟用一系列智能分包規(guī)則，盡可能減少模塊的重復(fù)打包
更好的靜態(tài)資源處理：Vite 盡量避免直接處理靜態(tài)資源，而是選擇遵循 ESM 方式提供服務(wù)，例如引入圖片 import img from 'xxx.png' 語句，執(zhí)行后 img 變量只是一個(gè)路徑字符串。

可以看出，Vite 的快是全方位的，從 Dev 到 Build，從 npm 包到項(xiàng)目源碼，再到靜態(tài)資源處理都在 ESM 規(guī)則框架下盡可能地實(shí)現(xiàn)各種優(yōu)化措施，理論性能急劇提升。

2.2 簡單

Vite 的用法很簡單，執(zhí)行初始化命令：

yarn create @vitejs/app my-vue-app --template vue

就得到了一個(gè)預(yù)設(shè)好的開發(fā)環(huán)境，可以開始愉快地寫 demo 了，Vite 開箱就給你一堆功能，包括 css 預(yù)處理器、html 預(yù)處理器、hash 命名、異步加載、分包、壓縮、HMR 等：

這些功能，作者都按行業(yè)最佳實(shí)踐預(yù)設(shè)好了，通常不需要用戶介入做變更。

Vite 的表現(xiàn)很容易讓人聯(lián)想到 vue-cli，不過兩者區(qū)別還是挺大的：vue-cli 底層依賴 Webpack，實(shí)際的構(gòu)建工作通常由各種 Webpack loader、plugin 實(shí)現(xiàn)，比如 less => css 由 less-loader 實(shí)現(xiàn)；圖片加載由 img-loader 實(shí)現(xiàn)等。這套設(shè)計(jì)很靈活，你可以在 Webpack 體系下做任何你能想到的變更，只需要學(xué)習(xí)一點(diǎn)點(diǎn) Webpack 的知識(shí)，包括百來個(gè)配置項(xiàng)、成千上萬的插件、若干虛無縹緲的構(gòu)建概念等。

而 Vite 顯得特別簡潔，它只是暴露了極少數(shù)的配置項(xiàng)與 plugin 接口，設(shè)計(jì)上就沒打算讓你做太多自定義操作。。。這是因?yàn)?Vite 從一開始就沒打算做成另一個(gè) Webpack，而是做成一套“能夠顯著提升前端開發(fā)體驗(yàn)的前端構(gòu)建工具”，重在開發(fā)體驗(yàn) 啊同學(xué)們，Vite 可謂是用心良苦，想盡辦法降低學(xué)習(xí)入門成本，它就不希望你為了使用工具又學(xué)一大堆復(fù)雜、縹緲的概念，希望這些事情都在框架層面屏蔽了 —— 雖然代價(jià)是喪失靈活性。

簡單說吧，Vite 定位就是傻瓜式但強(qiáng)大的構(gòu)建工具，你專心寫好業(yè)務(wù)代碼，早點(diǎn)下班，不用再為了工具費(fèi)神費(fèi)力了。

2.3 生態(tài)

除了極致的運(yùn)行性能與簡易的使用方法外，Vite 對(duì)已有生態(tài)的兼容性也不容忽略，主要體現(xiàn)在兩個(gè)點(diǎn)：

與 Vue 解耦，兼容支持 React、Svelte、Preact、Vanilla 等，這意味著 Vite 可以被應(yīng)用在大多數(shù)現(xiàn)代技術(shù)棧中
與 Rollup 極其接近的插件接口，這意味著可以復(fù)用 Rollup 生態(tài)中大部分已經(jīng)被反復(fù)錘煉的工具

說真的，這兩條擺上桌面，加上前面討論的性能優(yōu)勢(shì)和超低學(xué)習(xí)成本，一時(shí)半會(huì)真想不到拒絕的理由了。。。

三、Vite 的劣勢(shì)

Vite 還很新，雖然它從理論與體感上提供了非常極致的開發(fā)體驗(yàn)，還是有一些值得關(guān)注的問題。

3.1 兼容性

默認(rèn)情況下，無論是 dev 還是 build 都會(huì)直接打出 ESM 版本的代碼包，這就要求客戶瀏覽器需要有一個(gè)比較新的版本，這放在現(xiàn)在的國情下還是有點(diǎn)難度的。

不過 Vite 同時(shí)提供了一些彌補(bǔ)的方法，使用 build.polyfillDynamicImport 配置項(xiàng)配合@vitejs/plugin-legacy 打包出一個(gè)看起來兼容性比較好的版本，我相信這一點(diǎn)會(huì)隨時(shí)間慢慢被抹平。

3.2 缺少 Show Case

Vite 太新了，直到最近才釋放出正式 2.0版本，社區(qū)還沒太反應(yīng)過來，自然也就沒什么大型、復(fù)雜的商業(yè)落地案例，誰都說不準(zhǔn)這里面可能有多少坑。

不過好消息是社區(qū)對(duì) Vite 的搜索熱度在最近幾個(gè)月急劇增長：

數(shù)據(jù)來自谷歌指數(shù)

相信很快就會(huì)出現(xiàn)一大批布道者，畢竟這玩意兒是真的很有競爭力。

3.3 代價(jià)

不要忘記，工程化本身的復(fù)雜度不會(huì)憑空消失，只 Vite 背后的團(tuán)隊(duì)在幫我們負(fù)重前行，這對(duì) Vite 開發(fā)團(tuán)隊(duì)而言，維護(hù)這么多構(gòu)建規(guī)則是一個(gè)不小的負(fù)擔(dān)。而站在用戶的角度，越容易上手的工具往往意味著越難被定制。

另外，如果只是在 Vite 預(yù)設(shè)好的邊框里面玩確實(shí)很容易，但隨著項(xiàng)目復(fù)雜度的提高，用戶遲早還是會(huì)接觸到底層的 esbuild 或 Rollup，高工們?cè)撗a(bǔ)的知識(shí)還是遲早還是得補(bǔ)回來，逃不掉的。

三、總結(jié)

Vite 給我最大的啟示：Webpack 并不是標(biāo)準(zhǔn)答案，前端構(gòu)建工具可以有一些新的玩法：

打包不是目的，運(yùn)行才是，2021年了，能夠交給瀏覽器做的事情就交給瀏覽器吧
一個(gè)靈活的框架，對(duì)作者而言可能意味著逐步失控的開發(fā)量；對(duì)用戶而言可能意味高學(xué)習(xí)成本，以及不斷重復(fù)的類似空格好還是 tab 好的爭論。那么，一套內(nèi)置好各種業(yè)界最佳實(shí)踐，沒有太多定制空間的工具，某些情況下反而能提升大家的效率

我個(gè)人對(duì) Vite 的態(tài)度：短期保持觀望，長期非常看好。

我相信現(xiàn)在開始上手學(xué)習(xí) Vite 是一個(gè)不錯(cuò)的選擇，這東西封裝的太好了，學(xué)習(xí)成本極低(吹逼效果極好)，可以寫點(diǎn) Demo 或者就直接在一些用戶范圍可控的小型新項(xiàng)目落地。但是，建議不要激進(jìn)地直接重構(gòu)一些已有的大型項(xiàng)目，別自己給自己埋坑了，早點(diǎn)下班不香嗎。

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -

Vite 的好與壞