尤雨溪 3 天 10 更的 Vite 究竟有什么魔力？

上篇《尤雨溪是個(gè)惡魔，Vite 三天 10 更》談到了 Webpack 這一系列打包工具出現(xiàn)的原因。

這些工具的出現(xiàn)是為了解決 ES Modules 模塊系統(tǒng)本身的環(huán)境兼容問題、以及零散的模塊文件導(dǎo)致的頻繁網(wǎng)絡(luò)請(qǐng)求發(fā)送和模塊化發(fā)散的問題等等。

既然已經(jīng)有了 Webpack，尤大再整一個(gè) Vite 到底有啥用呢？

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器（module bundler）。

Vue 腳手架工具 vue-cli 使用 webpack 進(jìn)行打包，開發(fā)時(shí)可以啟動(dòng)本地開發(fā)服務(wù)器，實(shí)時(shí)預(yù)覽。因?yàn)樾枰獙?duì)整個(gè)項(xiàng)目文件進(jìn)行打包，開發(fā)服務(wù)器啟動(dòng)緩慢。

而對(duì)于開發(fā)時(shí)文件修改后的熱更新 HMR 也存在同樣的問題。

Webpack 的熱更新會(huì)以當(dāng)前修改的文件為入口重新 build 打包，所有涉及到的依賴也都會(huì)被重新加載一次。

Vite 則很好地解決了上面的兩個(gè)問題。

先來打包問題。vite 只啟動(dòng)一臺(tái)靜態(tài)頁面的服務(wù)器，對(duì)文件代碼不打包，服務(wù)器會(huì)根據(jù)客戶端的請(qǐng)求加載不同的模塊處理，實(shí)現(xiàn)真正的按需加載。

對(duì)于熱更新問題，vite 采用立即編譯當(dāng)前修改文件的辦法。同時(shí) vite 還會(huì)使用緩存機(jī)制( http 緩存 => vite 內(nèi)置緩存 )，加載更新后的文件內(nèi)容。

所以，vite 具有了快速冷啟動(dòng)、按需編譯、模塊熱更新等優(yōu)良特質(zhì)。

綜上所述，vite 構(gòu)建項(xiàng)目與 vue-cli 構(gòu)建的項(xiàng)目在開發(fā)模式下還是有比較大的區(qū)別：

1、Vite 在開發(fā)模式下不需要打包可以直接運(yùn)行，使用的是 ES6 的模塊化加載規(guī)則；Vue-CLI 開發(fā)模式下必須對(duì)項(xiàng)目打包才可以運(yùn)行。

2、Vite 基于緩存的熱更新，Vue-CLI 基于 Webpack 的熱更新。

說了這么多，vite 到底應(yīng)該怎么用呢？

雖然目前還沒有正式發(fā)布，但是文檔已經(jīng)寫的差不多了。https://vitejs.dev/guide/?

我們簡單來使用一下。

| 確保 Node ?版本是大于等于 12 的。

使用 NPM 命令：

 $ npm init @vitejs/app

或者使用 Yarn 命令：

 $ yarn create @vitejs/app

命令執(zhí)行后，會(huì)讓我們選擇構(gòu)建哪一種框架的項(xiàng)目，我這里就直接選擇 vue 了。

如果你不想在命令行中做選擇，可以指定具體的模板。

$ npm init @vitejs/app my-vue-app --template vue

注意，不管那種構(gòu)建方式，只是下載了項(xiàng)目代碼模板。運(yùn)行項(xiàng)目所需要的第三方擴(kuò)展都需要再次安裝才能夠運(yùn)行。

進(jìn)入到項(xiàng)目目錄，安裝所需依賴，并啟動(dòng)項(xiàng)目：

cd  <my-project>  npm install (or `yarn`)  npm run dev (or `yarn dev`)

通過 package.json 文件，我們能看到啟動(dòng)和打包的命令。

通過 ?npm run dev ?命令，啟動(dòng)開發(fā)服務(wù)器。

查看運(yùn)行結(jié)果：

使用 npm run build 命令進(jìn)行打包：

需要注意的是，打包后的代碼，在本地依然需要提供一臺(tái)靜態(tài)服務(wù)器才能運(yùn)行。

體驗(yàn)就到這里了。想要感受尤大的魔鬼更新速度的，可以去 github 看看：https://github.com/vitejs/vite

最后

點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了