Vue項(xiàng)目如何開(kāi)啟gzip

更新時(shí)間：2025年06月11日 16:48:30 作者：&活在當(dāng)下&

這篇文章主要介紹了Vue項(xiàng)目如何開(kāi)啟gzip的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

gzip 壓縮的方式有兩種

1、在服務(wù)端開(kāi)啟壓縮，當(dāng)瀏覽器發(fā)起請(qǐng)求時(shí)，服務(wù)端對(duì)傳輸資源進(jìn)行實(shí)時(shí)壓縮，然后返回給瀏覽器

2、對(duì) webpack 配置打包壓縮，并在服務(wù)端加上支持 gizp 的配置，當(dāng)瀏覽器請(qǐng)求時(shí)，服務(wù)端直接將資源返回給瀏覽器

兩種方法的區(qū)別

第一種是服務(wù)端進(jìn)行實(shí)時(shí)壓縮，對(duì)服務(wù)器的性能消耗較大
第二種則是打包后的 dist 文件包體積比較大（因?yàn)榘?.gz 文件和源文件）

綜上，兩種方法混合用比較合適，在 webpack 打包時(shí)，配置只對(duì)超過(guò)一定體積的文件進(jìn)行壓縮，然后配置 nginx ，當(dāng)瀏覽器發(fā)起請(qǐng)求時(shí)，服務(wù)端對(duì) .gz 文件進(jìn)行直接傳輸給瀏覽器，對(duì)源文件先進(jìn)行實(shí)時(shí)壓縮，在返回給瀏覽器。

第一種方法

直接在 nginx 服務(wù)端配置開(kāi)啟 gzip。

配置如下：

# 開(kāi)啟服務(wù)器實(shí)時(shí)gzip
  gzip on;
  
  # 開(kāi)啟靜態(tài)gz文件返回
  gzip_static on;
  
  # 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會(huì)壓縮
  gzip_min_length 1k;
  
  # 設(shè)置壓縮所需要的緩沖區(qū)大小     
  gzip_buffers 32 4k;

# 設(shè)置gzip壓縮針對(duì)的HTTP協(xié)議版本
  gzip_http_version 1.0;

  # gzip 壓縮級(jí)別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間
  gzip_comp_level 7;

  # 進(jìn)行壓縮的文件類型。javascript有多種形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

  # 是否在http header中添加Vary: Accept-Encoding，建議開(kāi)啟
  gzip_vary on;

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

添加后重啟 nginx ./nginx -s reload ，如下圖，看到響應(yīng)頭中出現(xiàn) Content-Encoding:gzip 表示開(kāi)啟成功：

第二種方法

在 Vue 項(xiàng)目中，使用 webpack 來(lái)開(kāi)啟 gzip ，如下：

首先，安裝 compression 插件

npm install compression-webpack-plugin

然后在 vue.config.js 中加上如下配置：

module.exports = {
  chainWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
        config.plugin('CompressionPlugin').use(
        	new CompressionWebpackPlugin({
            	filename: '[path][base].gz[query]', // 壓縮后的文件名(保持原文件名，后綴加.gz)
            	algorithm: 'gzip', // 使用gzip壓縮
            	test: /\.js$|\.css$/, // 匹配文件名
            	threshold: 10240, // 對(duì)超過(guò)10k的數(shù)據(jù)壓縮
            	minRatio: 1, // 壓縮率小于1才會(huì)壓縮
            	deleteOriginalAssets: false // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
          })
        )
   	}
  }
}

打包后，文件中會(huì)出現(xiàn) .gz 文件，如圖：

最后檢查一下 nginx 服務(wù)端配置是否支持 gzip ，如果不支持，則需加上如下配置：

    gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	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;