vue生成gzip壓縮包部署到nginx

gzip是GNUzip的縮寫，gzip可以被瀏覽器自動識別並解壓成原始文檔。如果我們把web網站資源進行gzip壓縮后進行傳輸給瀏覽器，這樣就能加快網站資源的加載速度。

一、vue打包生成gzip包

# 先安裝打包的插件 compression-webpack-plugin 6.1.1 版本，不要安裝最新的，不能正常打包
yarn add compression-webpack-plugin@6.1.1 -D

# 配置 vue.config.js
module.exports = {
	...
	chainWebpack(config) {
		...
		config
          .when(process.env.NODE_ENV !== 'development', config => {
          	...
          	 config
            	.plugin('CompressionPlugin')
            	.use('compression-webpack-plugin', [{
              		test: /\.js$|\.css$|\.html$/, // gzip壓縮規則
              		threshold: 10240, // 大於10K的數據會被壓縮
              		algorithm: 'gzip', // 壓縮方式
              		minRatio: 0.8 // 壓縮比小於這個的才壓縮
            	}])
            	.end()
          })
	}
}

二、生成壓縮包

使用下面的命令生成vue的部署文件

vue-cli-service build

生成如下壓縮包：

原本瀏覽器要加載 1011kb 的數據，打包后瀏覽器只需要加載 318kb 的數據，網站加載速度大幅度提升。

三、服務器開啟gzip

我們在打包是生成2個同名的文件，但是請求時服務器應該返回哪一個文件呢，如果服務器返回了.gz格式的文件就達到效果，如果服務器依然返回請求的源文件，那就達不到我們的目的了。

如果我們使用的nginx作為服務器，我們需要在 http 下面配置開啟 gzip 壓縮：

http {
	...
    #開啟gzip壓縮
    gzip_static on;
}

四、驗證是否生效

這是不開啟壓縮的效果：

這是開啟壓縮后的效果：

雖然瀏覽器顯示的大小和實際大小有出入，不過已經達到我們想要的效果了。