Vite 性能篇：掌握這些優(yōu)化策略，一起縱享絲滑！

作者：前端阿飛V 2022-12-20 09:09:27

Vite 在開(kāi)發(fā)環(huán)境性能已經(jīng)非常不錯(cuò)了，今天我們主要聊聊生產(chǎn)環(huán)境的優(yōu)化，其實(shí)方式和 Webpack 大同小異，只不過(guò) Vite 構(gòu)建時(shí)使用的是 Rollup 而已。

很多兄弟都在使用 Vite 了，但如果你是前端 leader 或者是團(tuán)隊(duì)核心的話，不得不可考慮的一個(gè)問(wèn)題就是性能優(yōu)化。Vite 在開(kāi)發(fā)環(huán)境性能已經(jīng)非常不錯(cuò)了，今天我們主要聊聊生產(chǎn)環(huán)境的優(yōu)化，其實(shí)方式和 Webpack 大同小異，只不過(guò) Vite 構(gòu)建時(shí)使用的是 Rollup 而已。

學(xué)習(xí) Vite 最好是拋開(kāi)腳手架工具，單獨(dú)使用它。方法我在入門(mén)篇已經(jīng)講過(guò)，這里就不再贅述了。那么還等什么，開(kāi)整！

分包策略

默認(rèn)情況下，瀏覽器重復(fù)請(qǐng)求相同名稱的靜態(tài)資源時(shí)，會(huì)直接使用緩存的資源。利用這個(gè)機(jī)制我們可以將不會(huì)經(jīng)常更新的代碼單獨(dú)打包成一個(gè) JS 文件，這樣就可以減少 HTTP 請(qǐng)求，同時(shí)降低服務(wù)器壓力。以 lodash 為例：

npm i lodash

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

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

const obj = cloneDeep({})

打包結(jié)果：

項(xiàng)目代碼和依賴模塊打包成了一個(gè) JS 文件。接著我們來(lái)配置分包，修改底層的 Rollup 配置：

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

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

打包結(jié)果如下：

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

treeshaking

treeshaking 也被稱為 “搖樹(shù)優(yōu)化”。簡(jiǎn)單來(lái)講，就是在保證代碼運(yùn)行結(jié)果不變的前提下，去除無(wú)用的代碼。Vue3中，許多 ApI 的引入都支持 treeshaking 優(yōu)化。也就是說(shuō)只打包你用到的 API，忽略那些沒(méi)有用到的。

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

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

const obj = cloneDeep({})

由于 lodash 是使用 CommonJS 規(guī)范的模塊，所以無(wú)法進(jìn)行 treeshaking ，Vue 會(huì)把整個(gè) lodash 依賴打包進(jìn)來(lái)。整個(gè)依賴文件的大小是 78.64 KB 。

然后我們使用 ESM 版的 loadsh 對(duì)比一下：

npm i lodash-es

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

const obj = cloneDeep({})

打包結(jié)果如下：

可以看到依賴體積瞬間變成了 13.23 KB ，是不是一下小了很多。所以我們?cè)谶x擇第三方庫(kù)時(shí)，要盡可能使用 ESM 版本，可以提升不少性能！

gzip 壓縮

gzip 是一種使用非常普遍的壓縮格式。使用 gzip 壓縮可以大幅減小代碼體積，提升網(wǎng)絡(luò)性能。開(kāi)啟 gzip 也比較簡(jiǎn)單，使用一個(gè)插件就可以了：

npm i vite-plugin-compression

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

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

打包結(jié)果如下：

可以看到經(jīng)過(guò) gzip 壓縮后，vendor.6fd516d3.js 文件從 13.23 KB 降到了 4.62KB，文件體積縮小了近 2/3 ，是不是很 nice。接下來(lái)就是后端同學(xué)的工作了：當(dāng)請(qǐng)求靜態(tài)資源時(shí)，如果發(fā)現(xiàn)有對(duì)應(yīng)的 gzip 的文件，直接把 gzip 內(nèi)容返給前端，并且設(shè)置一個(gè)響應(yīng)頭 content-encoding: gzip 。

完整邏輯是，我們需要把瀏覽器支持的壓縮類(lèi)型傳給服務(wù)端，在請(qǐng)求頭中設(shè)置 accept-encoding: gzip, deflate, br，只不過(guò)這一步瀏覽器通常幫我們都做了。然后服務(wù)端根據(jù)瀏覽器支持的類(lèi)型，設(shè)置響應(yīng)頭 content-encoding: gzip ，告訴瀏覽器以何種方式進(jìn)行解壓。

注意：因?yàn)闉g覽器解壓也需要時(shí)間，所以代碼體積不是很大的話不建議使用 gzip 壓縮。

cdn 加速

內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Network，簡(jiǎn)稱 CDN）就是讓用戶從最近的服務(wù)器請(qǐng)求資源，提升網(wǎng)絡(luò)請(qǐng)求的響應(yīng)速度。通常我們請(qǐng)求依賴模塊使用 CDN ，而請(qǐng)求項(xiàng)目代碼依然使用自己的服務(wù)器。還是以 lodash 為例：

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

const obj = _.cloneDeep({})

使用 CDN 也比較簡(jiǎn)單，一個(gè)插件就可以搞定：

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`
        }
      ]
    })
  ]
})

構(gòu)建成功后，Vite 會(huì)自動(dòng)幫我們將 cdn 資源通過(guò) script 標(biāo)簽插入到 html 中：

這樣請(qǐng)求 lodash 資源就會(huì)產(chǎn)生加速 buff ，而且項(xiàng)目體積也會(huì)大大減小！

圖片壓縮

根據(jù)項(xiàng)目對(duì)清晰度的要求，我們可以使用 vite-plugin-imagemin 插件，對(duì)圖片進(jìn)行適當(dāng)壓縮：

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 。

構(gòu)建分析

分析依賴模塊的大小占比，可以讓我們更有針對(duì)性的進(jìn)行體積優(yōu)化。我們通常使用 rollup-plugin-visualizer 插件進(jìn)行構(gòu)建分析，方法也比較簡(jiǎn)單：

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 ，構(gòu)建成功之后會(huì)在根目錄下生成一個(gè) stats.html ，打開(kāi)頁(yè)面即可以看到分析結(jié)果。我們還可以通過(guò)左上角的排除、包含輸入框?qū)σ蕾嚹K進(jìn)行篩選。同時(shí)鼠標(biāo)移入各模塊，可以看到詳細(xì)的分析數(shù)據(jù)：