什麼，你還使用 webpack？別人都在用 vite 搭建項目了

2021 年 10 月 25 日
筆記
VUE, 前端知識分享

一、vite 到底是幹嘛的？

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

vite 是法語中輕快的意思。

vite 的特點：

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

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

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

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

二、vite 創建 vue 項目

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"
  }
}

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

三、vite VS webpack

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 局限

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

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

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

Tags: VUE 前端知識分享