Vite 入門篇：學會它，一起提升開發幸福感！

語言: CN / TW / HK
時間 2023-01-29 17:15:12

theme: orange

本文為稀土掘金技術社區首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！

相信大部分兄弟都體驗過 Vite 了，知道它很快。但你知道它為什麼快，相比 Webpack 有哪些不同嗎？今天咱們就來全面瞭解一下 Vite ，尤其適合新手兄弟。話不多説，開整！

什麼是構建工具

很多人對構建工具沒有什麼概念，只知道是用來打包的。那麼到底什麼是構建工具呢？

大家都知道瀏覽器只支持 Html、CSS、JavaScript，但一個企業級項目可能會用到各種各樣的前端技術，如 Less、Sass、TS、Vue組件、語法降級、體積優化等，這時候我們就需要相應的工具去處理這些內容：

  • 使用 less-loader / sass-loader 處理 less / sass
  • 使用 tsc 將 typescript 轉換為 javascript
  • 使用 vue-complier 將 vue 組件模板轉換為 render 函數
  • 使用 babel 將 es 的新語法轉換為舊版瀏覽器認識的語法
  • 使用 uglifyjs 將我們的代碼壓縮成體積更小的文件

我們可以手動把代碼挨個處理一遍，但這樣效率非常低，當我們稍微修改一點代碼，這個流程又要重新走一遍，非常麻煩。有個神奇的東西，可以把以上工具集成到一起，整個流程交給它自動處理。而且當代碼發生變化時，自動幫我們重新走一遍，這個東西就叫做構建工具。當然構建工具做的事情遠不止於此，比如：

  1. 模塊化開發支持：支持直接從 node_modules 裏引入代碼
  2. 提高項目性能：壓縮文件、代碼分割
  3. 優化開發體驗：熱更新、跨域問題
  4. ......

構建工具減輕了我們的心智負擔，讓我們不用關心我們寫的代碼如何在瀏覽器運行，只需要關心代碼怎麼寫就可以了。市面上主流的構建工具有 Webpack、Vite、esbuild、Rollup、Parcel，以及最近剛出的 turbopack ，但目前最流行的依然是 Webpack 和 Vite 。

Vite 相較於 Webpack 的優勢

當項目體積越來越龐大時，構建工具需要處理的代碼量呈指數級增長，包含數千個模塊的項目也是相當普遍。類似 Webpack 的構建工具就會遇到性能瓶頸：通常需要很長時間，甚至幾分鐘項目才能啟動起來。熱更新（HMR）也可能需幾秒，甚至十幾秒。不知道大家目前的項目怎麼樣，反正我們公司稍微大一點的 Vue2 項目是真的慢，等的捉急。這種情況已經很大程度影響到了我們的開發效率和幸福感。

Webpack 有沒有辦法進行優化呢？很難。Webpack 先遞歸分析各模塊依賴關係-構建依賴圖譜，然後進行打包，再啟動本地服務器。而且 Webpack 支持多種模塊化規範，比如 CommonJS 、ES-Module ，一開始就要統一模塊化代碼，將所有的依賴全部處理一遍。整個流程如下圖：

vite1.png

即使使用按需加載，也有一系列工作需要做，所以 Webpack 基本沒有優化空間。

那麼 Vite 為什麼能解決這個問題呢？

  1. 底層語言。Vite 使用 esbuild 預構建依賴。esbuild 使用 Go 編寫，比用 JS 編寫的打包器預構建依賴快 10-100 倍。
  2. 先啟動服務器，再按需請求模塊並編譯。Vite 利用的是現代瀏覽器本身支持 ES-Module 這個特性，直接向依賴的模塊發出請求。Vite 啟動時不需要分析模塊之間的依賴關係，也不用打包，項目越大，優勢越明顯。

這個是 Vite 的啟動過程：

vite2.png

這樣大家應該看得出來 Vite 為什麼快了吧！

依賴預構建

上面提到了依賴預構建，可能很多兄弟對這個不太理解，這裏我也來講一下。現代瀏覽器已經支持 ES-Module ，但導入模塊只能用相對路徑或絕對路徑，直接使用模塊名稱的方式是行不通的：

js // main.js // 假設我們已經安裝了 lodash 模塊 import a from './a.js' // 支持 import b from '/b.js' // 支持 import _ from 'lodash' // 報錯

依賴預構建就可以很好的解決這個問題。Vite 首先會找到依賴的模塊，然後調用 esbuild，將 CommonJS 等其他規範的代碼轉換成 ES-Module 規範，然後把它放在 node_modules/.vite/deps 目錄下，接着再修改相應的引入路徑。

由於瀏覽器是通過 HTTP 來請求模塊文件的，一旦模塊的依賴關係比較多的話，就會發起很多個網絡請求。例如，lodash-es 內置模塊超過 600 個，它們之前相互導入。當我們執行以下代碼時，瀏覽器會同時發出 600 多個 HTTP 請求！大量的請求造成網絡堵塞，導致頁面的加載非常的慢。 js import { debounce } from 'lodash-es' 這時候還得靠依賴預構建，預構建將 lodash-es 整體轉換為一個模塊，這樣我們就只需要發起一個 HTTP 請求了！

總結一下，依賴預構建為我們解決了以下三個頭痛的問題： 1. 兼容其他規範。不同的第三方依賴包會有不同的導出格式（如 CommonJS 規範）。 2. 重寫導入路徑。例如 lodash 或重寫為 /node_modules/.vite/deps/lodash.js?v=fef37e66 ，以便瀏覽器能夠正確導入。 3. 網絡性能優化。Vite 會將內部有眾多依賴關係的 ES-Module 模塊轉換為一個模塊，提高頁面的加載性能。

對不同內容的處理

學習一項技術，最好的方式是單獨使用它。拋開腳手架工具，Vite 使用起來也非常的簡單，直接在項目中安裝 vite ，給個配置就可以了。當然不給也可以，Vite 會使用內置的默認配置：

js npm install vite -D

```js // vite.config.js import { defineConfig } from 'vite'

export default defineConfig({ // ... }) ``` 為了方便使用，可以在 package.json 添加啟動和打包命令。

js "scripts": { "dev": "vite", "build": "vite build" }, 然後在根目錄下新建一個 index.html，npm run dev 項目就跑起來了！

對 CSS 的處理

CSS Modules

在不同模塊中定義相同類名，會導致樣式被覆蓋，這時候就要用到 CSS module 。以 .module.css 結尾的文件都會被認為是一個 CSS modules 文件。導入這樣的文件會返回一個相應的對象：

js /* example.module.css */ .red { color: red; }

js // main.js import example from './example.module.css' console.log(example) // { red: '_red_te83z_1' } document.getElementById('foo').className = example.red

CSS 預處理器

Vite 同時提供了對 .scss，.sass，.less，.styl 和 .stylus 文件的內置支持，僅需安裝相應的預處理器就可以了：

```

.less

npm install less -D

.scss and .sass

npm install sass -D

.styl and .stylus

npm install stylus -D `` 感覺這塊要比 Webpack 簡單的多，Webpack 需要給不同類型的文件配置不同的loader去處理，而 Vite 內部直接幫我們配置好了。如果使用的是 Vue 單文件組件，可以通過

「」
「」