跨年都在更新的 vite 到底有多香?

2020年太難了，終於等到元旦能放假休息幾天，閒着沒事逛微博，而後，收到了來自 米國 的禮物：Vite2.0；

有沒有很震驚！跨年禮物vite2.0，我也真服啊，尤大你假期就不能打打遊戲刷刷劇嗎？

看到了更新，我還忍不住去官方文檔一探究竟，跟着看了幾天，就在我差很少看完文檔的時候，GitHub 那邊傳來了噩耗，三天時間，提交了 10 個 beta，尤雨溪你簡直就是個惡魔啊；

來吧，你們也感覺一下尤大的魔鬼更新速度……真是雷厲風行，一日千里

三天10更的 Vite 究竟有什麼魔力？

Vite（法語單詞，「快」 的意思）是一種新型的前端構建工具； 最初是配合 Vue3.0 一塊兒使用的，後來適配了各類前端項目，目前提供了 Vue、React、Preact 框架模板；

就目前來講，Vue 使用的是 vue-cli 腳手架，React 通常使用 create-react-app 腳手架，雖然腳手架工具不同，可是內部的打包工具都是 webpack ;

爲何要開發一個全新的構建工具，是 Webpack 不香了嗎？ Vite 方式構建的項目，和使用 Webpack 構建的項目，有什麼不一樣？ 一個新工具的出現，必定是爲了解決現有工具存在的問題的，不然新工具就沒有存在的價值和意義；

Vite 到底解決了 Webpack 那個些問題？

想要搞清楚這個問題，咱們須要先搞清楚 webpack 是幹什麼的？不少人的第一印象確定是 「打包工具」，那前端爲何須要打包工具呢？打包工具以前，前端開發有什麼問題？咱們真的須要打包工具嗎？

隨着互聯網的發展，前端項目愈來愈複雜，同時，V8 引擎，也讓 JavaScript 這門玩具語言，插上了商業項目開發的翅膀，讓 JS 再也不受瀏覽器環境的束縛，開始進軍系統級別開發領域；而隨着項目的複雜度升級，代碼規範和管理就必需要同步提高，因而，編程社區中提出了多種模塊化規範，服務端選擇了 CommonJS 規範，客戶端選擇 AMD 規範較多，可是，兩種模塊化規範也都存在必定的問題，都是 JS 編程，有兩個不一樣的模塊化規範，在 JS 語言層面仍是不夠的；

終於在ES6中，ECMA委員會推出了語言層面模塊系統：ES Modules 規範；

在目前的編程實踐中，前端編程得益於構建工具的發展，編碼過程當中使用 ES Modules 規範進行編碼是很是普遍的，可是後端依然使用 CommonJS 規範較多，不過 NodeJS 方面已經作出改變，逐漸趨向於 ES Modules 規範；

咱們來一點代碼，簡單看一下 ES Modules 的語法特性 模塊化能夠幫助咱們更好地解決複雜應用開發過程當中的代碼組織問題，可是隨着模塊化思想的引入，咱們的前端應用又會產生了一些新的問題，好比：

首先，咱們所使用的 ES Modules 模塊系統自己就存在環境兼容問題。儘管現現在主流瀏覽器的最新版本都支持這一特性，可是目前還沒法保證用戶的瀏覽器使用狀況。因此咱們還須要解決兼容問題。

其次，模塊化的方式劃分出來的模塊文件過多，而前端應用又運行在瀏覽器中，每個文件都須要單獨從服務器請求回來。零散的模塊文件必然會致使瀏覽器的頻繁發送網絡請求，影響應用的工做效率。

最後，談一下在實現 JS 模塊化的基礎上的發散。隨着應用日益複雜，在前端應用開發過程當中不只僅只有 JavaScript 代碼須要模塊化，HTML 和 CSS 這些資源文件也會面臨須要被模塊化的問題。並且從宏觀角度來看，這些文件也都應該看做前端應用中的一個模塊，只不過這些模塊的種類和用途跟 JavaScript 不一樣。

對於開發過程而言，模塊化確定是必要的，因此咱們須要在前面所說的模塊化實現的基礎之上引入更好的方案或者工具，去解決上面提出的 3 個問題，讓咱們的應用在開發階段繼續享受模塊化帶來的優點，又沒必要擔憂模塊化對生產環境所產生的影響。 相信你已經想到了，這就是 webpack 等一系列打包工具出現的緣由，上面的問題，就是這類工具核心要解決的問題；

本質上，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 到底應該怎麼用呢？

雖然目前尚未正式發佈，可是文檔已經寫得差很少了 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 看看：github.com/vitejs/vite