Vue項目打包后js文件過大的問題解決辦法

更新時間：2025年05月20日 09:03:37 作者：byg_qlh

在Vue項目中打包體積過大是一個常見的問題,這篇文章主要給大家介紹了關(guān)于Vue項目打包后js文件過大的問題解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

頁面加載的時候，時間過于緩慢，通過Chrome的F12性能調(diào)試，發(fā)現(xiàn)主要原因是因為加載的 js 過大而引起的。因為之前已經(jīng)提到了將我們一些組件改成CDN方式引入，例如 Vue、ElementUi、ECharts等。但是還是存在一些打包后的內(nèi)部 js 文件，他們的大小也過于龐大，因此本文將主要講解如何解決Vue項目打包后js文件過大的問題。

引入插件

我們可以通過引入 compression-webpack-plugin 插件，然后開啟 gzip 來解決本問題

首先安裝插件依賴

npm i compression-webpack-plugin@5.0.1

然后修改 config/index.js 文件，把 productionGzip 改為：true

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

然后在修改 build/webpack.prod.conf.js 文件，修改如下內(nèi)容

// 判斷配置文件是否開啟了gzip加速
if (config.build.productionGzip) {
  // 引入壓縮文件的組件，該插件會對生成的文件進行壓縮，生成一個.gz文件
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]', // 目標文件名
      algorithm: 'gzip',  // 使用gzip壓縮
      test: new RegExp( // 滿足正則表達式的文件會被壓縮
        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
      ),
      threshold: 10240, // 資源大于10240=10KB時會被壓縮
      minRatio: 0.8,
      deleteOriginalAssets: false, // 是否刪除原資源
    })
  )
}

打包

修改完成后，我們打包項目

npm run build

打包完成后，我們查看 dist目錄，能夠發(fā)現(xiàn)很多 js 文件已經(jīng)被壓縮了

修改Nginx配置

因為我們 Vue 項目打包后，部署的是靜態(tài)文件，因此我們還需要在 nginx 處開啟 gzip，找到 nginx.conf

# on為啟用，off為關(guān)閉
gzip on;
# Nginx的動態(tài)壓縮是對每個請求先壓縮再輸出，這樣造成虛擬機浪費了很多cpu，解決這個問題可以利用nginx模塊Gzip Precompression，這個模塊的作用是對于需要壓縮的文件，直接讀取已經(jīng)壓縮好的文件(文件名為加.gz)，而不是動態(tài)壓縮，對于不支持gzip的請求則讀取原文件
gzip_static on;
# 設置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭中的Content-Length中進行獲取。默認值是0，不管頁面多大都壓縮。建議設置成大于1k的字節(jié)數(shù)，小于1k可能會越壓越大。
gzip_min_length 1k;
# 獲取多少內(nèi)存用于緩存壓縮結(jié)果，‘4 16k'表示以16k*4為單位獲得
gzip_buffers 4 32k;
# 識別http協(xié)議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會看到亂碼
gzip_http_version 1.1;
# gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;
gzip_comp_level 2;
# 對特定的MIME類型生效,其中'text/html'被系統(tǒng)強制啟用
gzip_types text/plain application/x-javascript text/css application/xml;
# 啟用應答頭"Vary: Accept-Encoding"
gzip_vary on;
# IE5.5和IE6 SP1使用msie6參數(shù)來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴于PCRE庫
gzip_disable "MSIE [1-6].";

設置完成后，我們重啟 nginx

到這里為止，我們的響應時間過于緩慢的問題也得到了解決