一、前端配置

vue-cli3配置vue.config.js压缩打包的js文件

1.安装插件

执行 npm i compression-webpack-plugin -S

2.配置vue.config.js

vue.config.js配置

const CompressionPlugin = require('compression-webpack-plugin');
const path = require('path')

function resolve(dir) {
	return path.join(__dirname, dir)
}
module.exports = {
	lintOnSave: false,
	publicPath: '/',
	productionSourceMap: false,
	transpileDependencies: [
		'vue-echarts',
		'resize-detector'
	],
	configureWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			return {
				plugins: [
					new CompressionPlugin({
						//匹配规格
						test: /\.js$|\.html$|\.css$|\.png$/,
						//文件超过多大进行压缩
						threshold: 10240,
						//是否删除源文件（建议不删除）
						deleteOriginalAssets: false
					})
				],
			}
		}
	},
	devServer: {
		host: '0.0.0.0',
		port: '8081',
		open: true,
		proxy: {
			'/api': {
				target: 'http://example.com',
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	}
}

3.查看打包之后的js

执行 npm run build
查看 dist/js
我们可以看到所有超过10k的js文件已经生成了相应的gzip压缩包

二、nginx配置

gzip压缩是需要nginx配置的

nginx.conf开启gzip

nginx -t 找到nginx.conf的位置
nginx.conf配置 (配置完记得执行nginx -s reload)

注意：当nginx开启gzip压缩的时候，无论前端打包出来的文件是否压缩，网站加载到的js文件都是经过nginx实时压缩过的。
所以，gzip_static off的时候，前端上传的js压缩文件（gzip格式那些）并没有什么卵用。
当gzip_static on时，优先加载前端打包的gzip压缩文件，如果没有找到该文件，那么nginx将实时压缩之后传给浏览器。
前端进行压缩的目的就是能够减少nginx实时压缩带来的压力。

 gzip on;
 gzip_static on; //当存在.gzip格式的js文件时，优先使用静态文件
 gzip_min_length  10k; //开启gzip压缩的最小大小
 gzip_buffers     4 16k;
 gzip_http_version 1.1;
 gzip_comp_level 6;
 gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
 gzip_vary on;
 gzip_proxied   expired no-cache no-store private auth;
 gzip_disable   "MSIE [1-6]\.";

三、检验gzip压缩是否成功（看Content-Encoding）

1.当Content-Encoding: gzip 时，说明gzip压缩开启成功 2.如何判断是nginx实时压缩（ETag:）
ETag: W/"5f9294e1-502bd"为nginx实时压缩
ETag: "5f9294e1-502bd"为加载静态压缩包

前端使用Vue-Cli开启gzip压缩JS