快捷導(dǎo)航

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

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

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

正文

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

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

分析文件依賴

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

安裝插件 rollup-plugin-visualizer

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

運(yùn)行打包命令，會(huì)自動(dòng)彈出效果如下

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

指定文件按需加載

比如下面的echarts,這樣就不會(huì)將整個(gè)包加載進(jìn)來(lái)，因?yàn)関ite自動(dòng)開啟tree-shaking，所以打包的時(shí)候只會(huì)將LabelLayout, UniversalTransition這兩個(gè)依賴打進(jìn)包里（包括組件庫(kù)也是這種做法）

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

下面開始運(yùn)行我們本地打包的命令，查看依賴關(guān)系這樣我們就可以相對(duì)于的優(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]' // 資源文件像 字體，圖片等
      }
    }
  }

打包效果

最小化拆分包

將需要分離的包單獨(dú)的打包出來(lái)

 // 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();
		        }
            }
        }
    }
}

關(guān)閉一些打包配置項(xiàng)

這個(gè)東西一般是在測(cè)試階段調(diào)試使用的

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

低版本瀏覽器兼容

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

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

使用CDN

其實(shí)使用cdn也有很多中方式，在這里就介紹我在項(xiàng)目中使用的，當(dāng)然我這種也不是比較好方案，如果你有更好的方案，還請(qǐng)?jiān)谙旅媪粞?/p>

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

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

配置CDN地址我們借助vite-plugin-html插件來(lái)幫我們自動(dòng)引入地址

// 引入
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;',
        },
     },
    }),

最后在我們模板頁(yè)面head部分上寫入ejs模板語(yǔ)法

<% vuescript %>

最后打包完在html文件中會(huì)自動(dòng)將模板替換掉達(dá)到下面的效果

開啟Gzip

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

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

參數(shù)

filter：過濾器，對(duì)哪些類型的文件進(jìn)行壓縮，默認(rèn)為/.(js|mjs|json|css|html)$/i
verbose: true：是否在控制臺(tái)輸出壓縮結(jié)果，默認(rèn)為 true
threshold ：?jiǎn)⒂脡嚎s的文件大小限制，單位是字節(jié)，默認(rèn)為 0
disable : false：是否禁用壓縮，默認(rèn)為 false
deleteOriginFile ：壓縮后是否刪除原文件，默認(rèn)為 false
algorithm ：采用的壓縮算法，默認(rèn)是 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 壓縮級(jí)別 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; 
    }