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

這些工具的出現是為了解決 ES Modules 模組系統本身的環境相容問題、以及零散的模組檔案導致的頻繁網路請求傳送和模組化發散的問題等等。

既然已經有了 Webpack，尤大再整一個 Vite 到底有啥用呢？

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器（module bundler）。

Vue 腳手架工具 vue-cli 使用 webpack 進行打包，開發時可以啟動本地開發伺服器，實時預覽。因為需要對整個專案檔案進行打包，開發伺服器啟動緩慢。

而對於開發時檔案修改後的熱更新 HMR 也存在同樣的問題。

Webpack 的熱更新會以當前修改的檔案為入口重新 build 打包，所有涉及到的依賴也都會被重新載入一次。

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

先來打包問題。vite 只啟動一臺靜態頁面的伺服器，對檔案程式碼不打包，伺服器會根據客戶端的請求載入不同的模組處理，實現真正的按需載入。

對於熱更新問題，vite 採用立即編譯當前修改檔案的辦法。同時 vite 還會使用快取機制( http 快取 => vite 內建快取 )，載入更新後的檔案內容。

所以，vite 具有了快速冷啟動、按需編譯、模組熱更新等優良特質。

綜上所述，vite 構建專案與 vue-cli 構建的專案在開發模式下還是有比較大的區別：

1、Vite 在開發模式下不需要打包可以直接執行，使用的是 ES6 的模組化載入規則；Vue-CLI 開發模式下必須對專案打包才可以執行。

2、Vite 基於快取的熱更新，Vue-CLI 基於 Webpack 的熱更新。

說了這麼多，vite 到底應該怎麼用呢？

雖然目前還沒有正式釋出，但是文件已經寫的差不多了。https://vitejs.dev/guide/

我們簡單來使用一下。

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

使用 NPM 命令：

 $ npm init @vitejs/app

或者使用 Yarn 命令：

 $ yarn create @vitejs/app

命令執行後，會讓我們選擇構建哪一種框架的專案，我這裡就直接選擇 vue 了。

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

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

注意，不管那種構建方式，只是下載了專案程式碼模板。執行專案所需要的第三方擴充套件都需要再次安裝才能夠執行。

進入到專案目錄，安裝所需依賴，並啟動專案：

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

透過 package.json 檔案，我們能看到啟動和打包的命令。

透過 npm run dev 命令，啟動開發伺服器。

檢視執行結果：

使用 npm run build 命令進行打包：

需要注意的是，打包後的程式碼，在本地依然需要提供一臺靜態伺服器才能執行。

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