Vite打包優(yōu)化之縮小打包體積實現(xiàn)詳解

更新時間：2023年01月04日 11:11:27 作者：摸魚的湯姆

這篇文章主要為大家介紹了使用Vite縮小打包體積如何實現(xiàn)的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

說到前端性能優(yōu)化??，通過我個人的感覺總體的來說優(yōu)化的本質就是優(yōu)化文件的體積，體積小了加載就快了，當然前端性能不光是在體積方面，在代碼層面需要去優(yōu)化，本篇文章主要講述的是Vite打包優(yōu)化，下面就跟大家分享一下我總結的一些有關Vite打包的優(yōu)化方案吧！

下面給大家分享一下我的一些方案，如果文章中存在哪些問題還請指正

分析文件依賴

其實優(yōu)化的主要難點還是從哪里開始去優(yōu)化，如果不清楚自己的項目問題出現(xiàn)在哪里，就顯得比較盲目，不知道優(yōu)化哪里，那在優(yōu)化之前我們先分析一下我文件依賴

安裝插件 rollup-plugin-visualizer

plugins:[
     visualizer({ open: true }) // 自動開啟分析頁面
]

運行打包命令，會自動彈出效果如下

通過該關系圖得出依賴之間的關系，與文件大小，可以指定的去優(yōu)化

指定文件按需加載

比如下面的echarts,這樣就不會將整個包加載進來，因為vite自動開啟tree-shaking，所以打包的時候只會將LabelLayout, UniversalTransition這兩個依賴打進包里（包括組件庫也是這種做法）

import { LabelLayout, UniversalTransition } from 'echarts/features';

下面開始運行我們本地打包的命令，查看依賴關系這樣我們就可以相對于的優(yōu)化

路徑別名&文件尾綴

 resolve: {
      alias: {
        '@': pathResolve('src') + '/',
        '@views': pathResolve('./src/views') + '/',
      },
      extensions: ['.js', '.vue', '.json'], 
    },

靜態(tài)資源的打包

 build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',  // 引入文件名的名稱
        entryFileNames: 'js/[name]-[hash].js',  // 包的入口文件名稱
        assetFileNames: '[ext]/[name]-[hash].[ext]' // 資源文件像 字體，圖片等
      }
    }
  }

打包效果

最小化拆分包

將需要分離的包單獨的打包出來

 // vite.config.ts
build: {
    // rollup 配置
    rollupOptions: {
        output: {
            manualChunks(id: any): string {  
                if (id.includes("node_modules")) {
                    return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
		        }
            }
        }
    }
}

關閉一些打包配置項

這個東西一般是在測試階段調試使用的

build: { 
      terserOptions: {
        compress: {
          //生產(chǎn)環(huán)境時移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
    //   關閉文件計算
      reportCompressedSize: false,
    //   關閉生成map文件 可以達到縮小打包體積
      sourcemap: false, // 這個生產(chǎn)環(huán)境一定要關閉，不然打包的產(chǎn)物會很大
}

低版本瀏覽器兼容

安裝插件npm i @vitejs/plugin-legacy -D

  legacyPlugin({
      targets: ['chrome 52', 'Android &gt; 39', 'iOS &gt;= 10.3', 'iOS &gt;= 10.3'], // 需要兼容的目標列表，可以設置多個
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11時需要此插件
    })

使用CDN

其實使用cdn也有很多中方式，在這里就介紹我在項目中使用的，當然我這種也不是比較好方案，如果你有更好的方案，還請在下面留言

安裝插件 npm install rollup-plugin-external-globals -D
配置插件比如我們需要吧Vue使用CND的方式引入

rollupOptions: {
        //  告訴打包工具 在external配置的 都是外部依賴項  不需要打包
        external: ['vue'],
        plugins: [
            // 避免打包和生產(chǎn)模式運行出錯 在這里聲明公共模塊
          externalGlobals({
            //  "在項目中引入的變量名稱" ："CDN包導出的名稱，一般在CDN包中都是可見的"
            vue: 'Vue', 
          }),
        ] 
      },

配置CDN地址我們借助vite-plugin-html插件來幫我們自動引入地址

// 引入
import { createHtmlPlugin } from 'vite-plugin-html';
// 將下面的添加到plugin下
createHtmlPlugin({
    minify: true,
    inject: {
        data: {
        title: ENV.VITE_APP_TITLE,  // 這里是配置的環(huán)境變量
        vuescript:'&lt;script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"&gt;&lt;/script&gt;',
        },
     },
    }),

最后在我們模板頁面head部分上寫入ejs模板語法

<% vuescript %>

最后打包完在html文件中會自動將模板替換掉達到下面的效果

開啟Gzip

它的主要作用就是縮小打包的體積

安裝插件 npm install vite-plugin-compression -D

參數(shù)

filter：過濾器，對哪些類型的文件進行壓縮，默認為/.(js|mjs|json|css|html)$/i
verbose: true：是否在控制臺輸出壓縮結果，默認為 true
threshold ：啟用壓縮的文件大小限制，單位是字節(jié)，默認為 0
disable : false：是否禁用壓縮，默認為 false
deleteOriginFile ：壓縮后是否刪除原文件，默認為 false
algorithm ：采用的壓縮算法，默認是 gzip
ext ：生成的壓縮包后綴

viteCompression({
    verbose: true,    
    disable: false,
    threshold: 10240,  
    algorithm: 'gzip',
    ext: '.gz',
    })

打包輸出效果

通過上面可以明顯的看出開啟Gzip與不開啟存在明顯的差別

第三步就是配置我們的Nginx

    server{
        #gzip
        #開啟gzip功能
        gzip on; 
        #開啟gzip靜態(tài)壓縮功能
        gzip_static on; 
        #gzip緩存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 壓縮級別 1-10 
        gzip_comp_level 5;
        #gzip 壓縮類型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
        gzip_vary on; 
    }