相信大部分兄弟都體驗(yàn)過(guò) Vite 了，知道它很快。但你知道它為什么快，相比 Webpack 有哪些不同嗎？今天咱們就來(lái)全面了解一下 Vite ，尤其適合新手兄弟。一起學(xué)起來(lái)吧！

什么是構(gòu)建工具

很多人對(duì)構(gòu)建工具沒(méi)有什么概念，只知道是用來(lái)打包的。那么到底什么是構(gòu)建工具呢？

大家都知道瀏覽器只支持 Html、CSS、JavaScript，但一個(gè)企業(yè)級(jí)項(xiàng)目可能會(huì)用到各種各樣的前端技術(shù)，如 Less、Sass、TS、Vue組件、語(yǔ)法降級(jí)、體積優(yōu)化等，這時(shí)候我們就需要相應(yīng)的工具去處理這些內(nèi)容：

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

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

1. 模塊化開(kāi)發(fā)支持：支持直接從 node_modules 里引入代碼。
2. 提高項(xiàng)目性能：壓縮文件、代碼分割。
3. 優(yōu)化開(kāi)發(fā)體驗(yàn)：熱更新、跨域問(wèn)題。
4. ......

構(gòu)建工具減輕了我們的心智負(fù)擔(dān)，讓我們不用關(guān)心我們寫(xiě)的代碼如何在瀏覽器運(yùn)行，只需要關(guān)心代碼怎么寫(xiě)就可以了。市面上主流的構(gòu)建工具有 Webpack、Vite、esbuild、Rollup、Parcel，以及最近剛出的 turbopack ，但目前最流行的依然是 Webpack 和 Vite 。

Vite 相較于 Webpack 的優(yōu)勢(shì)

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

Webpack 有沒(méi)有辦法進(jìn)行優(yōu)化呢？很難。Webpack 先遞歸分析各模塊依賴(lài)關(guān)系-構(gòu)建依賴(lài)圖譜，然后進(jìn)行打包，再啟動(dòng)本地服務(wù)器。而且 Webpack 支持多種模塊化規(guī)范，比如 CommonJS 、ES-Module ，一開(kāi)始就要統(tǒng)一模塊化代碼，將所有的依賴(lài)全部處理一遍。整個(gè)流程如下圖：

即使使用按需加載，也有一系列工作需要做，所以 Webpack 基本沒(méi)有優(yōu)化空間。

那么 Vite 為什么能解決這個(gè)問(wèn)題呢？

1. 底層語(yǔ)言。Vite 使用 esbuild預(yù)構(gòu)建依賴(lài)。esbuild使用 Go 編寫(xiě)，比用 JS 編寫(xiě)的打包器預(yù)構(gòu)建依賴(lài)快 10-100 倍。
2. 先啟動(dòng)服務(wù)器，再按需請(qǐng)求模塊并編譯。Vite 利用的是現(xiàn)代瀏覽器本身支持 ES-Module這個(gè)特性，直接向依賴(lài)的模塊發(fā)出請(qǐng)求。Vite 啟動(dòng)時(shí)不需要分析模塊之間的依賴(lài)關(guān)系，也不用打包，項(xiàng)目越大，優(yōu)勢(shì)越明顯。

這個(gè)是 Vite 的啟動(dòng)過(guò)程：

這樣大家應(yīng)該看得出來(lái) Vite 為什么快了吧！

依賴(lài)預(yù)構(gòu)建

上面提到了依賴(lài)預(yù)構(gòu)建，可能很多兄弟對(duì)這個(gè)不太理解，這里我也來(lái)講一下?，F(xiàn)代瀏覽器已經(jīng)支持 ES-Module ，但導(dǎo)入模塊只能用相對(duì)路徑或絕對(duì)路徑，直接使用模塊名稱(chēng)的方式是行不通的：

// main.js
// 假設(shè)我們已經(jīng)安裝了 lodash 模塊
import a from './a.js' // 支持
import b from '/b.js' // 支持
import _ from 'lodash' // 報(bào)錯(cuò)

依賴(lài)預(yù)構(gòu)建就可以很好的解決這個(gè)問(wèn)題。Vite 首先會(huì)找到依賴(lài)的模塊，然后調(diào)用 esbuild，將 CommonJS 等其他規(guī)范的代碼轉(zhuǎn)換成 ES-Module 規(guī)范，然后把它放在 node_modules/.vite/deps 目錄下，接著再修改相應(yīng)的引入路徑。

由于瀏覽器是通過(guò) HTTP 來(lái)請(qǐng)求模塊文件的，一旦模塊的依賴(lài)關(guān)系比較多的話(huà)，就會(huì)發(fā)起很多個(gè)網(wǎng)絡(luò)請(qǐng)求。例如，lodash-es 內(nèi)置模塊超過(guò) 600 個(gè)，它們之前相互導(dǎo)入。當(dāng)我們執(zhí)行以下代碼時(shí)，瀏覽器會(huì)同時(shí)發(fā)出 600 多個(gè) HTTP 請(qǐng)求！大量的請(qǐng)求造成網(wǎng)絡(luò)堵塞，導(dǎo)致頁(yè)面的加載非常的慢。

import { debounce } from 'lodash-es'

這時(shí)候還得靠依賴(lài)預(yù)構(gòu)建，預(yù)構(gòu)建將 lodash-es 整體轉(zhuǎn)換為一個(gè)模塊，這樣我們就只需要發(fā)起一個(gè) HTTP 請(qǐng)求了！

總結(jié)一下，依賴(lài)預(yù)構(gòu)建為我們解決了以下三個(gè)頭痛的問(wèn)題：

1. 兼容其他規(guī)范。不同的第三方依賴(lài)包會(huì)有不同的導(dǎo)出格式（如 CommonJS規(guī)范）。
2. 重寫(xiě)導(dǎo)入路徑。例如 lodash或重寫(xiě)為/node_modules/.vite/deps/lodash.js?v=fef37e66，以便瀏覽器能夠正確導(dǎo)入。
3. 網(wǎng)絡(luò)性能優(yōu)化。Vite 會(huì)將內(nèi)部有眾多依賴(lài)關(guān)系的 ES-Module模塊轉(zhuǎn)換為一個(gè)模塊，提高頁(yè)面的加載性能。

對(duì)不同內(nèi)容的處理

學(xué)習(xí)一項(xiàng)技術(shù)，最好的方式是單獨(dú)使用它。拋開(kāi)腳手架工具，Vite 使用起來(lái)也非常的簡(jiǎn)單，直接在項(xiàng)目中安裝 vite ，給個(gè)配置就可以了。當(dāng)然不給也可以，Vite 會(huì)使用內(nèi)置的默認(rèn)配置：

npm install vite -D

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

export default defineConfig({
  // ...
})

為了方便使用，可以在 package.json 添加啟動(dòng)和打包命令。

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

然后在根目錄下新建一個(gè) index.html，npm run dev 項(xiàng)目就跑起來(lái)了！

對(duì) CSS 的處理

「CSS Modules」

在不同模塊中定義相同類(lèi)名，會(huì)導(dǎo)致樣式被覆蓋，這時(shí)候就要用到 CSS module 。以 .module.css 結(jié)尾的文件都會(huì)被認(rèn)為是一個(gè) CSS modules 文件。導(dǎo)入這樣的文件會(huì)返回一個(gè)相應(yīng)的對(duì)象：

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

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

「CSS 預(yù)處理器」

Vite 同時(shí)提供了對(duì) .scss，.sass，.less，.styl 和 .stylus 文件的內(nèi)置支持，僅需安裝相應(yīng)的預(yù)處理器就可以了：

# .less
npm install less -D

# .scss and .sass
npm install sass -D

# .styl and .stylus
npm install stylus -D

感覺(jué)這塊要比 Webpack 簡(jiǎn)單的多，Webpack 需要給不同類(lèi)型的文件配置不同的 loader 去處理，而 Vite 內(nèi)部直接幫我們配置好了。如果使用的是 Vue 單文件組件，可以通過(guò) <style lang="less"> 自動(dòng)開(kāi)啟。

「PostCSS」

PostCSS 也是用來(lái)處理 CSS 的，只不過(guò)它更像是一個(gè)工具箱，可以添加各種各樣的插件來(lái)處理 CSS 。像我們經(jīng)常遇到的樣式兼容性問(wèn)題，如高級(jí) CSS 語(yǔ)法的降級(jí)、前綴補(bǔ)全等，都可以通過(guò) PostCSS 來(lái)解決。

Vite 對(duì) PostCSS 有良好的支持，我們只需安裝需要使用的插件就可以了。

npm install postcss-preset-env -D

postcss-preset-env 是一個(gè)預(yù)設(shè)環(huán)境插件，包含高級(jí) CSS 語(yǔ)法的降級(jí)、前綴補(bǔ)全等眾多功能。接下來(lái)我們?cè)?nbsp;vite.config.js 中配置一下：

// vite.config.js
import { defineConfig } from 'vite'
import postcssPresetEnv from 'postcss-preset-env'

export default defineConfig({
  css: {
    postcss: {
      plugins: [postcssPresetEnv()]
    }
  }
})

然后我們來(lái)寫(xiě)一些特別的樣式：

/* index.css */
.content {
  width: clamp(100px, 30%, 200px);
  user-select: none;
}

// main.js
import './index.css'

打開(kāi)瀏覽器，可以看到 CSS 已經(jīng)幫我們處理好了：

整體來(lái)說(shuō) PostCSS 還是非常實(shí)用的，可以幫助我們處理各種各樣的 CSS 問(wèn)題。

對(duì)靜態(tài)資源的處理

1. 將資源引入為 URL 。默認(rèn)情況下引入一個(gè)靜態(tài)資源，會(huì)返回這個(gè)資源的 URL 路徑，也就是絕對(duì)路徑。

import imgUrl from './img.png'
console.log(imgUrl) // /src/img.png
document.getElementById('hero-img').src = imgUrl

我們可以通過(guò)添加后綴的方式，修改文件的引入方式。默認(rèn)的引入方式等同于添加 ?url 后綴。

import imgUrl from './img.png?url'

2. 將資源引入為字符串。使用 ?raw后綴可以將資源作為字符串引入，這個(gè)字符串其實(shí)就是源文件信息。

import imgUrl from './img.png?raw'
console.log(imgUrl) // 源文件信息
document.getElementById('hero-img').src = imgUrl

3. 導(dǎo)入腳本作為 Worker 。JS 腳本可以通過(guò) ?worker或?sharedworker后綴導(dǎo)入為 web worker。

// worker
import Worker from './shader.js?worker'
const worker = new Worker()

// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()

對(duì) JSON 的處理

JSON 文件可以被直接導(dǎo)入。同時(shí)也支持具名導(dǎo)入，幫助我們更好地利用 treeshaking ：

// 導(dǎo)入整個(gè)對(duì)象
import json from './example.json'
// 對(duì)一個(gè)根屬性使用具名導(dǎo)入，有效幫助 treeshaking！
import { field } from './example.json'

對(duì) Vue 的處理

Vite 為 Vue 提供第一優(yōu)先級(jí)支持，直接使用相應(yīng)的插件就好了：

• Vue 3 支持：@vitejs/plugin-vue
• Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
• Vue 2.7 支持：@vitejs/vite-plugin-vue2
• Vue <2.7 支持：underfin/vite-plugin-vue2

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

對(duì) TS 的處理

Vite 天然支持引入 .ts 文件。Vite 使用 esbuild 將 TypeScript 轉(zhuǎn)譯到 JavaScript，約是 tsc 速度的 20~30 倍，同時(shí) HMR 熱更新也是非常的快 。

Vite 僅執(zhí)行 .ts 文件的轉(zhuǎn)譯工作，并不執(zhí)行任何類(lèi)型檢查。換句話(huà)來(lái)說(shuō)，即使 IDE 提示報(bào)錯(cuò)，也不影響正常開(kāi)發(fā)和生成環(huán)境打包。這樣肯定是不行的，不然很難對(duì)代碼進(jìn)行有效約束。我們可以使用插件來(lái)實(shí)現(xiàn)這個(gè)功能：

# 用于檢查的插件
npm install vite-plugin-checker -D
# typescript 是 vite-plugin-checker 的依賴(lài)
npm install typescript -D

// vite.config.js
import { defineConfig } from 'vite'
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [checker({
    typescript: true
  })]
})

然后在根目錄創(chuàng)建 tsconfig.json 文件：

// tsconfig.json
{
  "include": ["src/**/*"] // 需要校驗(yàn)的文件夾
}

這樣 TS 的報(bào)錯(cuò)信息就會(huì)在命令行和頁(yè)面上顯示出來(lái)，不修正就無(wú)法繼續(xù)往下開(kāi)發(fā)啦！

如果要在類(lèi)型檢查不通過(guò)時(shí)阻止生產(chǎn)環(huán)境打包，直接在 build 命令中添加一個(gè)指令即可：

// package.json
"scripts": {
  "dev": "vite",
  "build": "tsc --noEmit && vite build"
}

環(huán)境變量與模式

Vite 和 Webpack 類(lèi)似，都是使用 dotenv 從特定的文件中加載額外的環(huán)境變量：

.env # 所有情況下都會(huì)加載
.env.development # 開(kāi)發(fā)環(huán)境會(huì)加載（名稱(chēng)可以通過(guò)配置修改）
.env.production # 生產(chǎn)環(huán)境會(huì)加載（同上）

在客戶(hù)端中我們使用 import.meta.env 獲取環(huán)境變量。為了防止意外地將一些環(huán)境變量泄漏到客戶(hù)端，只有以 VITE_ 為前綴的變量才會(huì)暴露到客戶(hù)端，例如使用以下環(huán)境變量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

客戶(hù)端控制臺(tái)打印結(jié)果：

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

在服務(wù)端，也就是 vite.config.js 中，通過(guò) process.env 獲取環(huán)境變量。但是 vite 考慮到和其他配置的一些沖突問(wèn)題，Vite 不會(huì)將環(huán)境變量直接注入到 process.env 對(duì)象下。這時(shí)候我們可以手動(dòng)進(jìn)行處理：

// vite.config.js
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // loadEnv() 第一個(gè)參數(shù)為當(dāng)前模式
  // 第二個(gè)參數(shù)為環(huán)境變量文件所在目錄，process.cwd() 返回當(dāng)前 node 進(jìn)程的工作目錄
  // 第三個(gè)參數(shù)表示加載以 xxx 開(kāi)頭的環(huán)境變量，'' 代表加載所有的環(huán)境變量
  const env = loadEnv(mode, process.cwd(), '')
  console.log(env.VITE_SOME_KEY) // 123
  console.log(env.DB_PASSWORD) // foobar
  return {
    // 配置信息
  }
})

實(shí)際開(kāi)發(fā)中，我們可能還會(huì)用到測(cè)試環(huán)境和預(yù)發(fā)布環(huán)境，這時(shí)候需要?jiǎng)?chuàng)建兩個(gè)環(huán)境變量文件：.env.test 和 .env.staging 。

// .env.test
NODE_ENV=development
VITE_SOME_KEY=456

// .env.staging
NODE_ENV=production
VITE_SOME_KEY=789

然后在 package.json 中添加一下運(yùn)行指令就可以了。

"scripts": {
  "test": "vite --mode test",
  "staging": "vite build --mode staging"
}

生產(chǎn)環(huán)境構(gòu)建

盡管原生 ES-Module 現(xiàn)在得到了廣泛支持，但由于嵌套導(dǎo)入會(huì)導(dǎo)致額外的網(wǎng)絡(luò)往返，在生產(chǎn)環(huán)境中發(fā)布未打包的 ES-Module 效率仍然非常低（即使使用 HTTP/2）。為了在生產(chǎn)環(huán)境中獲得最佳的加載性能，更好的利用 tree-shaking、懶加載和 chunk 分割等，Vite 把生產(chǎn)環(huán)境構(gòu)建全權(quán)交給了 Rollup 。

我們可以通過(guò) 構(gòu)建配置選項(xiàng) 自定義構(gòu)建過(guò)程，比如，通過(guò) build.rollupOptions 直接調(diào)整底層的 Rollup 選項(xiàng) ，使用 build.assetsInlineLimit 修改圖片轉(zhuǎn) base64 的閾值。

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    },
    assetsInlineLimit: 4096, // 4kb
  }
})

生產(chǎn)環(huán)境中，我們不得不考慮一個(gè)問(wèn)題，就是瀏覽器的兼容性問(wèn)題。默認(rèn)情況下，Vite 的目標(biāo)是支持 原生 ESM script 標(biāo)簽 、支持原生 ESM 動(dòng)態(tài)導(dǎo)入 和 import.meta 的現(xiàn)代瀏覽器：

• Chrome >=87
• Firefox >=78
• Safari >=13
• Edge >=88

但我們可以通過(guò) Vite 自帶的 @vitejs/plugin-legacy 插件，來(lái)兼容舊版本的瀏覽器。

# 必須安裝 Terser，@vitejs/plugin-legacy 會(huì)使用 Terser 進(jìn)行壓縮
npm install terser -D

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      // defaults 是 Browserslist 推薦的值
      targets: ['defaults', 'not IE 11']
    })
  ]
}

生產(chǎn)環(huán)境還有很多實(shí)用的配置，我就不一一介紹了，大家可以在官網(wǎng)查看。

小結(jié)

今天的分享內(nèi)容比較多，不知道大家吸收的怎么樣。其實(shí) Vite 還是有很多東西可以講的，這次主要是幫助大家對(duì) Vite 有一個(gè)整體的了解，后面我會(huì)繼續(xù)分享 Vite 配置篇和性能優(yōu)化篇。