vite 是什么
vite —— 一個由 vue 作者尤雨溪開發的 web 開發工具
Vite由兩個主要部分組成
- dev server：利用瀏覽器的ESM能力來提供源文件，具有豐富的內置功能并具有高效的HMR
- 生產構建：生產環境利用Rollup來構建代碼，提供指令用來優化構建過程
Vite作為一個基于瀏覽器原生ESM的構建工具，它省略了開發環境的打包過程，利用瀏覽器去解析imports，在服務端按需編譯返回。同時，在開發環境擁有速度快到驚人的模塊熱更新，且熱更新的速度不會隨著模塊增多而變慢。因此，使用Vite進行開發，至少會比Webpack快10倍左右。
Vite的主要特性
- Instant Server Start —— 即時服務啟動
- Lightning Fast HMR —— 閃電般快速的熱更新
- Rich Features —— 豐富的功能
- Optimized Build —— 經過優化的構建
- Universal Plugin Interface —— 通用的Plugin接口
- Fully Typed APIs —— 類型齊全的API
為什么要使用Vite
開發環境??速度的提升
經過1.3節，我們簡單對比了各打包工具之間的差異。可以看到使用JS開發的工具通常需要很長的時間才能啟動開發服務器，且這個啟動時間與代碼量、代碼復雜度正相關。即使使用HMR，文件修改后的效果也要幾秒鐘才能在瀏覽器中反應出來，代表如Webpack。那么Vite是如何解決如Webpack這樣的構建工具一樣，在復雜、多模塊項目開發中啟動慢、HMR慢的問題呢？
我們詳細對比了開發環境中的Vite和Webpack，發現主要有如下不同：
| Webpack | Vite |
|---|---|
| 先打包生成bundle，再啟動開發服務器 | 先啟動開發服務器，利用新一代瀏覽器的ESM能力，無需打包，直接請求所需模塊并實時編譯 |
| HMR時需要把改動模塊及相關依賴全部編譯 | HMR時只需讓瀏覽器重新請求該模塊，同時利用瀏覽器的緩存（源碼模塊協商緩存，依賴模塊強緩存）來優化請求 |
| 內存高效利用 | - |
因此，針對開發環境中的啟動慢問題，Vite開發環境冷啟動無需打包，無需分析模塊之間的依賴，同時也無需在啟動開發服務器前進行編譯，啟動時還會使用esbuild來進行預構建。而Webpack 啟動后會做一堆事情，經歷一條很長的編譯打包鏈條，從入口開始需要逐步經歷語法解析、依賴收集、代碼轉譯、打包合并、代碼優化，最終將高版本的、離散的源碼編譯打包成低版本、高兼容性的產物代碼，這可滿滿都是 CPU、IO 操作啊，在 Node 運行時下性能必然是有問題。
針對HMR慢，即使只有很小的改動，Webpack依然需要構建完整的模塊依賴圖，并根據依賴圖來進行轉換。而Vite利用了ESM和瀏覽器緩存技術，更新速度與項目復雜度無關。可以看到，如Snowpack、Vite這類面相非打包的構建工具，在開發環境啟動時只需要啟動兩個Server，一個用于頁面加載，一個用于HMR的Websocket。當瀏覽器發出原生的ESM請求，Server收到請求只需要編譯當前文件后返回給瀏覽器，不需要管理依賴。
?
使用簡單，開箱即用
相比Webpack需要對entry、loader、plugin等進行諸多配置，Vite的使用可謂是相當簡單了。只需執行初始化命令，就可以得到一個預設好的開發環境，開箱即獲得一堆功能，包括：CSS預處理、html預處理、異步加載、分包、壓縮、HMR等。他使用復雜度介于Parcel和Webpack的中間，只是暴露了極少數的配置項和plugin接口，既不會像Parcel一樣配置不靈活，又不會像Webpack一樣需要了解龐大的loader、plugin生態，靈活適中、復雜度適中。適合前端新手。
