前言

有開發(fā)經(jīng)驗的小伙伴都知道，在使用Webpack作為基礎(chǔ)的各類開發(fā)工具前，我們需要配置很多Webpack相關(guān)的環(huán)境配置，比如entry、output、plugins等。Webpack配置過程繁瑣不說，隨著使用的累積，整個項目的編譯會越來越慢。

得益于瀏覽器對ES Module的支持，出現(xiàn)了基于瀏覽器原生ES imports的開發(fā)服務(wù)器：Vite。

因其原生 ES 模塊導(dǎo)入方式，可以實現(xiàn)閃電般的冷服務(wù)器啟動,大大減少了程序員在前端開發(fā)過程中的時間消耗。

尤雨溪的微博原話是這樣解釋的：

Vite，一個基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個概念，服務(wù)器隨起隨用。同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。雖然現(xiàn)在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。

如何使用Vite呢？

那么我們先來看一下如何使用Vite初始化一個項目，注意：Node需要12.0.0版本以上。

打開命令行輸入（my-app為project-name）：

根據(jù)提示選擇vue模板，然后通過以下指令啟動項目：

效果如下：

項目結(jié)構(gòu)如下：

跟Vue Cli構(gòu)建的項目不同的是，配置文件變成了vite.config.js，具體的配置項可以查看官方文檔。

Vite常見的配置

我們來看看在vite.config.js文件中的常見配置有哪些：

base

這是開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑，打完包的/dist/index.html文件中引入資源也是以這個路徑為基礎(chǔ)。

resolve.alias

為了方便在項目代碼內(nèi)部引用文件時，書寫路徑方便而設(shè)置的路徑別名。

當(dāng)使用文件系統(tǒng)路徑的別名時，請始終使用絕對路徑。?相對路徑的別名值會原封不動地被使用，因此無法被正常解析。

resolve.extensions

在導(dǎo)入文件時可以省略的擴展名列表。

導(dǎo)入時想要省略的擴展名列表。注意，不建議忽略自定義導(dǎo)入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持。

server

開發(fā)服務(wù)器選項的配置，這個配置項內(nèi)置多種開發(fā)時用的選項。

Vite原理分析

ES 模塊是?Vite?的基礎(chǔ)，通過下圖瀏覽器對ES 模塊的支持情況，我們可以知道除了IE 瀏覽器之外，主流瀏覽器較新的版本都已經(jīng)支持了ES 模塊。

ES 模塊的特點是，在script標(biāo)簽中設(shè)置type=module?之后，瀏覽器可以直接使用export和import的方式實現(xiàn)導(dǎo)入模塊和導(dǎo)出模塊了。效果如下：

當(dāng)script標(biāo)簽中的代碼執(zhí)行時，瀏覽器會發(fā)起http請求獲得a.js。

而Vite是如何使用ES模塊的呢？

啟動我們使用Vite構(gòu)建的項目，在瀏覽器打開后，打開控制臺，點擊Network，效果如下：

script設(shè)置了?type=module?屬性，并且 src 引入?/src/main.js，打開main.js效果如下：

再查看vue.js和App.vue的加載路徑，效果如下：

代碼從http://localhost:3000/node_modules/.vite/vue.js?v=5484949c獲得了createApp方法，并且從http://localhost:3000/src/App.vue獲得了根組件。Vite省去了打包的過程，直接從瀏覽器中按照ES 模塊的方式獲得了代碼。

Webpack的編譯打包方式很難做到按需加載，會將所有的資源打包到一個boundle文件中。而隨著項目的業(yè)務(wù)內(nèi)容增多，打包的boundle文件也會越來越大。為了減小boundle的體積，引入import()的方式來實現(xiàn)按需加載，但是這樣的方式引入的代碼還是需要提前打包。后來使用webpack的tree shaking功能刪除沒有使用的代碼塊。

但以上的方式都沒有Vite優(yōu)雅。雖然Vite的方式目前只能用于開發(fā)環(huán)境，但Vite真正做到了按需編譯，并且不需要提前打包，這樣大大提高了我們開發(fā)的效率。