Vite性能優(yōu)化之分包策略的實現(xiàn)

更新時間：2023年05月08日 14:29:33 作者：拾荒草

本文主要介紹了Vite性能優(yōu)化之分包策略的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

為什么需要分包策略？

還是舉個例子，來回憶一下吧，什么呢？
比如說，我使用了 loadsh.js 的東西，那么我們在打包的時候，就會把 loadsh 相關資源也會打包進來，這個是沒有問題的，此時是將 loadsh 的東西與我們自己寫的相關代碼合成一個文件，記住是一個文件。
瀏覽器是有緩存機制的，當每一次去請求的文件資源時 ( 文件名是沒有發(fā)生改變的時候，就會讀取內(nèi)存中的數(shù)據(jù)，而不會重新去服務器獲取 )。
分包，我的理解，就是將第三方資源文件單獨打成一個文件，自己寫的代碼打成另一個文件

如果我們不進行分包
我們每一次修改代碼之后，進行打包，結(jié)果這個文件的內(nèi)容有：第三方資源包代碼 + 我們自己寫的業(yè)務代碼。
而且，這個文件的名字，每一次都會發(fā)生變化的(源代碼發(fā)生變化)，所以當用戶去訪問我們的頁面時，請求的資源文件內(nèi)容有 : 第三方資源包代碼 + 自己的業(yè)務代碼，而真正需要跟新的只有自己的業(yè)務代碼，導致每一次，請求的js文件體積都很大，所以響應時間會長一些

瀏覽器的緩存策略

瀏覽器在請求靜態(tài)資源時，只要靜態(tài)資源的名稱不變，它就不會重新請求 xxx.js資源。

使用Vite打包后的js文件是帶有哈希值的，只要我們的代碼內(nèi)容有一點點變化，那么文件的hash值都會變化。

我們初始化一個項目，安裝vite進行演示

npm init -y
npm i vite -D

// main.js中寫一點邏輯
const mainArr = []

打包

更改main.js中的邏輯然后重新打包

// 更改main.js中的邏輯
let mainArr = []

可見，項目中任何業(yè)務代碼更改后，文件的hash值都會改變，重新部署代碼后，瀏覽器都會重新請求資源文件。

基于這種策略，服務器往往存在不必要的性能浪費。

瀏覽器緩存策略的不足

假設我們的項目修改了一點點業(yè)務邏輯，每次打包發(fā)布后，由于打包的文件名發(fā)生了改變，瀏覽器都會重新請求這個js文件。

看個示例：

我們引入lodash，然后main.js中寫入一點邏輯。

import { forEach } from "lodash"
const mainArr = []
forEach(mainArr,(ele) => {
  console.log('ele: ', ele);
})

打包

main.js中修改了一點點內(nèi)容，重新打包

注：為了展示源碼，這里關閉了打包時的代碼壓縮。vite.config.js中配置build:{minify:false}

通過這個示例我們可以發(fā)現(xiàn)個問題，我們引入了lodash，雖然它的內(nèi)容始終沒有變（大概有5481行的代碼），但是隨著業(yè)務代碼的一點點修改，它都會和業(yè)務代碼打包在一起，被瀏覽器重新請求。

這是浪費性能的，lodash完全沒有必要被重新請求。如果我們將lodash和業(yè)務代碼打包成兩個獨立的js文件，就可以完美解決這個問題。這就是分包策略。

分包策略就是把一些不會經(jīng)常更新的文件，進行單獨打包處理。

分包策略的實現(xiàn)

vite中實現(xiàn)分包策略，實際是靠配置rollup的打包配置完成的。

// vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
  build:{
    // 在這里配置打包時的rollup配置
    rollupOptions:{
    }
  }
});

rollup的output.manualChunks這一配置可以實現(xiàn)分包策略，具體內(nèi)容可以查看官網(wǎng):

https://www.rollupjs.com/guide/big-list-of-options

output.manualChunks

官方注解：

當該選項值為函數(shù)形式時，每個被解析的模塊都會經(jīng)過該函數(shù)處理。如果函數(shù)返回字符串，那么該模塊及其所有依賴將被添加到以返回字符串命名的自定義 chunk 中。例如，以下例子會創(chuàng)建一個命名為 vendor 的 chunk，它包含所有在 node_modules 中的依賴。

manualChunks(id) {
  if (id.includes('node_modules')) {
    return 'vendor';
  }
}

我們打印一下manualChunks函數(shù)的參數(shù)

import { defineConfig } from "vite";
export default defineConfig({
  build:{
    minify:false,
    // 在這里配置打包時的rollup配置
    rollupOptions:{
      manualChunks:(id) => {
        console.log("id-------------",id);
      }
    }
  }
});

可以看出，id對應的就是所有需要打包整合的文件，如果id包含node_modules，一定不是我們的業(yè)務代碼，根據(jù)官方釋義，我們可以將包含node_modules的文件打包在一起

import { defineConfig } from "vite";
export default defineConfig({
  build:{
    minify:false,
    // 在這里配置打包時的rollup配置
    rollupOptions:{
      manualChunks:(id) => {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
      }
    }
  }
});

重新打包后，可以發(fā)現(xiàn)分包策略已經(jīng)實現(xiàn)了。