很多兄弟都在使用 Vite 了，但如果你是前端 leader 或者是團隊核心的話，不得不可考慮的一個問題就是性能優化。Vite 在開發環境性能已經非常不錯了，今天我們主要聊聊生產環境的優化，其實方式和 Webpack 大同小異，只不過 Vite 構建時使用的是 Rollup 而已。

學習 Vite 最好是拋開腳手架工具，單獨使用它。方法我在入門篇已經講過，這里就不再贅述了。那么還等什么，開整！

分包策略

默認情況下，瀏覽器重復請求相同名稱的靜態資源時，會直接使用緩存的資源。利用這個機制我們可以將不會經常更新的代碼單獨打包成一個 JS 文件，這樣就可以減少 HTTP 請求，同時降低服務器壓力。以 lodash 為例：

npm i lodash

安裝 lodash ，然后在 main.js 中寫入以下代碼：

// src/main.js
import { cloneDeep } from 'lodash'

const obj = cloneDeep({})

打包結果：

項目代碼和依賴模塊打包成了一個 JS 文件。接著我們來配置分包，修改底層的 Rollup 配置：

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

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: id {
          // 將 node_modules 中的代碼單獨打包成一個 JS 文件
          if(id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

打包結果如下：

可以看到依賴模塊已經單獨生成一個 JS 文件了。這樣我們即使修改了 main.js 中的代碼重新打包，依賴文件 vendor.528a7280.js 也不會發生變化的，對于這個文件，瀏覽器也不會再次發起請求。如果依賴模塊很多的話，性能是不是有很大的提升呢？

treeshaking

treeshaking 也被稱為 “搖樹優化”。簡單來講，就是在保證代碼運行結果不變的前提下，去除無用的代碼。Vue3中，許多 ApI 的引入都支持 treeshaking 優化。也就是說只打包你用到的 API，忽略那些沒有用到的。

Vue3 會默認使用 Rollup 進行 treeshaking ，不需要額外進行配置。但有一個條件，必須是 ES6 module 模塊才行。還是上面那個例子：

// src/main.js
import { cloneDeep } from 'lodash'

const obj = cloneDeep({})

由于 lodash 是使用 CommonJS 規范的模塊，所以無法進行 treeshaking ，Vue 會把整個 lodash 依賴打包進來。整個依賴文件的大小是 78.64 KB 。

然后我們使用 ESM 版的 loadsh 對比一下：

npm i lodash-es

// src/main.js
import { cloneDeep } from 'lodash-es'

const obj = cloneDeep({})

打包結果如下：

可以看到依賴體積瞬間變成了 13.23 KB ，是不是一下小了很多。所以我們在選擇第三方庫時，要盡可能使用 ESM 版本，可以提升不少性能！

gzip 壓縮

gzip 是一種使用非常普遍的壓縮格式。使用 gzip 壓縮可以大幅減小代碼體積，提升網絡性能。開啟 gzip 也比較簡單，使用一個插件就可以了：

npm i vite-plugin-compression

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

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

打包結果如下：

可以看到經過 gzip 壓縮后，vendor.6fd516d3.js 文件從 13.23 KB 降到了 4.62KB，文件體積縮小了近 2/3 ，是不是很 nice。接下來就是后端同學的工作了：當請求靜態資源時，如果發現有對應的 gzip 的文件，直接把 gzip 內容返給前端，并且設置一個響應頭 content-encoding: gzip 。

完整邏輯是，我們需要把瀏覽器支持的壓縮類型傳給服務端，在請求頭中設置 accept-encoding: gzip, deflate, br，只不過這一步瀏覽器通常幫我們都做了。然后服務端根據瀏覽器支持的類型，設置響應頭 content-encoding: gzip ，告訴瀏覽器以何種方式進行解壓。

注意：因為瀏覽器解壓也需要時間，所以代碼體積不是很大的話不建議使用 gzip 壓縮。

cdn 加速

內容分發網絡（Content Delivery Network，簡稱 CDN）就是讓用戶從最近的服務器請求資源，提升網絡請求的響應速度。通常我們請求依賴模塊使用 CDN ，而請求項目代碼依然使用自己的服務器。還是以 lodash 為例：

// src/main.js
import _ from 'lodash'

const obj = _.cloneDeep({})

使用 CDN 也比較簡單，一個插件就可以搞定：

npm i vite-plugin-cdn-import -D

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

export default defineConfig({
  plugins: [
    viteCDNPlugin({
      // 需要 CDN 加速的模塊
      modules: [
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    })
  ]
})

構建成功后，Vite 會自動幫我們將 cdn 資源通過 script 標簽插入到 html 中：

這樣請求 lodash 資源就會產生加速 buff ，而且項目體積也會大大減??！

圖片壓縮

根據項目對清晰度的要求，我們可以使用 vite-plugin-imagemin 插件，對圖片進行適當壓縮：

npm i vite-plugin-imagemin -D

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

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ]
})

不同格式的文件配置也不一樣，具體可以參考 github ：vite-plugin-imagemin 。

構建分析

分析依賴模塊的大小占比，可以讓我們更有針對性的進行體積優化。我們通常使用 rollup-plugin-visualizer 插件進行構建分析，方法也比較簡單：

npm install rollup-plugin-visualizer -D

// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    // 將 visualizer 插件放到最后
    visualizer()
  ]
})

npm run build ，構建成功之后會在根目錄下生成一個 stats.html ，打開頁面即可以看到分析結果。我們還可以通過左上角的 排除、包含 輸入框對依賴模塊進行篩選。同時鼠標移入各模塊，可以看到詳細的分析數據：

小結

ok，今天的分享就是這些。如果你的項目已經在用 Vite ，不妨試驗一下以上方案，看看項目會不會變得更加絲滑。