2020年太難了，終于等到元旦能放假休息幾天，閑著沒事逛微博，然后，收到了來自米國的禮物：Vite2.0；
有沒有很震驚！跨年禮物vite2.0，我也真服啊，尤大你假期就不能打打游戲刷刷劇嗎？
看到了更新，我還忍不住去官方文檔一探究竟，跟著看了幾天，就在我差不多看完文檔的時候，GitHub 那邊傳來了噩耗，三天時間，提交了 10 個 beta，尤雨溪你簡直就是個惡魔??；
來吧，大家也感受一下尤大的魔鬼更新速度……真是雷厲風(fēng)行，一日千里
三天10更的Vite究竟有什么魔力？
Vite（法語單詞，“快” 的意思）是一種新型的前端構(gòu)建工具；
最初是配合 Vue3.0 一起使用的，后來適配了各種前端項目，目前提供了Vue、React、Preact 框架模板；
就目前來說，Vue 使用的是 vue-cli 腳手架，React 一般使用 create-react-app 腳手架，雖然腳手架工具不一樣，但是內(nèi)部的打包工具都是 webpack ;
為什么要開發(fā)一個全新的構(gòu)建工具，是 Webpack 不香了嗎？
Vite 方式構(gòu)建的項目，和使用 Webpack 構(gòu)建的項目，有什么不同？
一個新工具的出現(xiàn)，一定是為了解決現(xiàn)有工具存在的問題的，否則新工具就沒有存在的價值和意義；
Vite 到底解決了 Webpack 那個些問題？
想要搞清楚這個問題，我們需要先搞清楚 webpack 是干什么的？很多人的第一印象肯定是 “打包工具”，那前端為什么需要打包工具呢？打包工具之前，前端開發(fā)有什么問題？我們真的需要打包工具嗎？
隨著互聯(lián)網(wǎng)的發(fā)展，前端項目越來越復(fù)雜，同時，V8 引擎，也讓 JavaScript 這門玩具語言，插上了商業(yè)項目開發(fā)的翅膀，讓 JS 不再受瀏覽器環(huán)境的束縛，開始進軍系統(tǒng)級別開發(fā)領(lǐng)域；而隨著項目的復(fù)雜度升級，代碼規(guī)范和管理就必須要同步提升，于是，編程社區(qū)中提出了多種模塊化規(guī)范，服務(wù)端選擇了 CommonJS 規(guī)范，客戶端選擇 AMD 規(guī)范較多，但是，兩種模塊化規(guī)范也都存在一定的問題，都是 JS 編程，有兩個不同的模塊化規(guī)范，在 JS 語言層面還是不夠的；
終于在ES6中，ECMA委員會推出了語言層面模塊系統(tǒng)：ES Modules 規(guī)范；
在目前的編程實踐中，前端編程得益于構(gòu)建工具的發(fā)展，編碼過程中使用 ES Modules 規(guī)范進行編碼是非常廣泛的，但是后端依然使用 CommonJS 規(guī)范較多，不過 NodeJS 方面已經(jīng)做出改變，逐漸趨向于 ES Modules 規(guī)范；
我們來一點代碼，簡單看一下 ES Modules 的語法特性
模塊化可以幫助我們更好地解決復(fù)雜應(yīng)用開發(fā)過程中的代碼組織問題，但是隨著模塊化思想的引入，我們的前端應(yīng)用又會產(chǎn)生了一些新的問題，比如：
首先，我們所使用的 ES Modules 模塊系統(tǒng)本身就存在環(huán)境兼容問題。盡管現(xiàn)如今主流瀏覽器的最新版本都支持這一特性，但是目前還無法保證用戶的瀏覽器使用情況。所以我們還需要解決兼容問題。
其次，模塊化的方式劃分出來的模塊文件過多，而前端應(yīng)用又運行在瀏覽器中，每一個文件都需要單獨從服務(wù)器請求回來。零散的模塊文件必然會導(dǎo)致瀏覽器的頻繁發(fā)送網(wǎng)絡(luò)請求，影響應(yīng)用的工作效率。
最后，談一下在實現(xiàn) JS 模塊化的基礎(chǔ)上的發(fā)散。隨著應(yīng)用日益復(fù)雜，在前端應(yīng)用開發(fā)過程中不僅僅只有 JavaScript 代碼需要模塊化，HTML 和 CSS 這些資源文件也會面臨需要被模塊化的問題。而且從宏觀角度來看，這些文件也都應(yīng)該看作前端應(yīng)用中的一個模塊，只不過這些模塊的種類和用途跟 JavaScript 不同。
對于開發(fā)過程而言，模塊化肯定是必要的，所以我們需要在前面所說的模塊化實現(xiàn)的基礎(chǔ)之上引入更好的方案或者工具，去解決上面提出的 3 個問題，讓我們的應(yīng)用在開發(fā)階段繼續(xù)享受模塊化帶來的優(yōu)勢，又不必擔(dān)心模塊化對生產(chǎn)環(huán)境所產(chǎn)生的影響。
相信你已經(jīng)想到了，這就是 webpack 等一系列打包工具出現(xiàn)的原因，上面的問題，就是這類工具核心要解決的問題；
本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。
Vue 腳手架工具 vue-cli 使用 webpack 進行打包，開發(fā)時可以啟動本地開發(fā)服務(wù)器，實時預(yù)覽，因為需要對整個項目文件進行打包，開發(fā)服務(wù)器啟動緩慢
而對于開發(fā)時文件修改后的熱更新 HMR 也存在同樣的問題；
Webpack 的熱更新會以當(dāng)前修改的文件為入口重新 build 打包，所有涉及到的依賴也都會被重新加載一次
Vite 則很好地解決了上面的兩個問題。
先來打包問題，vite 只啟動一臺靜態(tài)頁面的服務(wù)器，對文件代碼不打包，服務(wù)器會根據(jù)客戶端的請求，加載不同的模塊處理，實現(xiàn)真正的按需加載；
對于熱更新問題，vite 采用立即編譯當(dāng)前修改的文件，同時 vite 還會使用緩存機制( http緩存 => vite內(nèi)置緩存 )，加載更新后的文件內(nèi)容
所以，vite 具有了 快速冷啟動、按需編譯、模塊熱更新 等優(yōu)良特質(zhì)；
綜上所述，vite 構(gòu)建項目與 vue-cli 構(gòu)建的項目主要在于開發(fā)模式下，區(qū)別還是比較大的：
1：Vite 在開發(fā)模式下不需要打包可以直接運行，使用的是 ES6 的模塊化加載規(guī)則；Vue-CLI 開發(fā)模式下必須對項目打包才可以運行；
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í)行后，會讓我們選擇構(gòu)建哪一種框架的項目，我這里就直接選擇 vue 了
如果你不想在命令行中做選擇，可以指定具體的模板
$ npm init @vitejs/app my-vue-app --template vue
注意，不管哪種構(gòu)建方式，只是下載了項目代碼模板，運行項目所需要的第三方擴展，都需要再次安裝才能夠運行；
進入到項目目錄，安裝所需依賴，并啟動項目：
cd <my-project>
npm install (or `yarn`)
npm run dev (or `yarn dev`)
通過 package.json 文件，我們能看到啟動和打包的命令
通過 npm run dev 命令，啟動開發(fā)服務(wù)器：
使用 npm run build 命令進行項目構(gòu)建：
需要注意的是，構(gòu)建成功后的代碼是靜態(tài)資源文件，在本地依然需要提供一臺靜態(tài)服務(wù)器才能運行；
體驗就到這里了，想要感受尤大的魔鬼更新速度的，可以去 github 看看：https://github.com/vitejs/vite
