vite 實際上就是一個面向現代浏覽器，基于 ES module 實現了一個更輕快的項目構建打包工具。

vite 是法語中輕快的意思。

vite 的特點：

1、輕快的冷服務啟動。vite 是面向現代浏覽器的，浏覽器支持 ES6 的 imports屬性，利用浏覽器解析 imports，在服務端按需編譯返回，不進行打包。所以運行速度較快。

2、開發中的熱更新。監聽項目代碼，有改動時，會立即重新運行。

3、按需進行編譯，不會刷新全部的DOM。vite隻需要在浏覽器請求源碼時進行轉換并按需提供源碼。根據情景動态導入代碼，隻有在當前屏幕實際使用時才會被處理。

vite 對現代的浏覽器支持性比較好，傳統的浏覽器可以通過官方提供的 @vite/plugin-legacy 插件支持。

vite 是構建工具的高階封裝，它的内部其實是 Rollup。

vite 是尤雨溪随着vue3正式版一起發布的一個工具，所以 vite 隻提供了 vue3 的項目搭建方法，沒有 vue2.0 搭建方式。除了能夠搭建 vue3 項目之外，還能搭建 vue-ts、react 、react-ts、preact、preact-ts、vanilla、vanilla-ts、lit、svelte。

2.1、手把手教你搭建 vite 項目

打開命令行工具，使用npm命令：

npm init vite@lasted

運行結果，如圖：

輸入需要創建的項目名“ learn_vite ”，如果不輸入，默認是 “ vite-project ” 。

回車進行下一步，需要選擇創建項目的類型，如圖：

使用上下箭頭切換，選擇我們最熟悉的 vue ，回車進行下一步。

進行選擇是否為 ts? vite 原生支持 ts 。我們直接選擇vue。不要 ts。

此時，項目創建完成了，需要進入項目，安裝依賴，就可以啟動服務了。

根據提示地址，去訪問我們剛剛創建的第一個項目。如圖所示。

2.2、 vite創建文件目錄

創建好項目之後，使用編輯器打開項目，我們可以看到項目結構如圖：

學習vite是如何運行項目的，首先從配置文件入手。打開package.json文件，代碼如下：

{ "name": "learn_vite", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "vite": "^2.6.4" } }

找到啟動項目的命令，以及打包命令。

3.1、vite 速度快有多快？

我們創建兩個項目，一個使用 vite ，另一個使用 webpack 。創建完成之後，啟動服務，對比啟動時間，我們就知道 vite 有多快了。

啟動服務時，webpack 需要先打包項目，打包之後再啟動項目，但是 vite 完全跳過了打包這個概念，服務器随起随用。所以在啟動服務時，vite 比 webpack 的速度快多了。

3.2、vite 熱更新效率有多高？

一些打包器的開發服務器将構建内容存入内存，這樣它們隻需要在文件更改時，使模塊圖的一部分失活，但它也需要整個重新構建并重新載入頁面。這樣代價很高，重新加載頁面會失去應用的當前狀态。所以 vite 支持了動态模塊熱加載（HMR），也就是允許一個模塊“熱替換”自己，對頁面的其他部分沒有影響，也就是隻替換更新了一部分有改變的元素，所以大大改進了開發體驗。

vite 同時還利用 http 頭加速整個頁面的加載，依賴模塊請求會通過 Cache-Control:max-age=31536000，immutable 進行強緩存，再次請求的時候，緩存的内容就不需要再次請求。

3.3、使用語言不同

webpack 使用的是 node.js 去實現的，而 vite 使用的是esbuild預構建依賴。而es build使用Go編寫的，比 node.js 編寫的打包器預構建依賴快 10-100 倍。

上邊說這麼多，淨誇 vite 有多優秀了，難道 vite 就是這麼強大，沒有什麼缺點嗎？

vite 與webpack 相比，畢竟出道時間有點短，它的生态還不是不完善。webpack最牛之處就在于 loader 和 plugin 非常豐富。

vite 打包項目時，目前使用的是 Rollup，對 CSS和代碼分割不是很友好。

vite 剛興起不久，生态系統還不夠完善，建議大家在創建工作項目的時候還是使用 webpack 。自己的項目可以使用 vite 。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!