vue-cli项目配置gzip压缩

安装依赖

npm install compression-webpack-plugin --save-dev

配置

vue.config.js

const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
    
    
	configureWebpack: (config) => {
    
    
		// 开发环境不需要gzip
		if (process.env.NODE_ENV !== "production") return;
		config.plugins.push(
			new CompressionWebpackPlugin({
    
    
				// 正在匹配需要压缩的文件后缀
				test: /\.(js|css|svg|woff|ttf|json|html)$/,
				// 大于10kb的会压缩
				threshold: 10240,
			})
		);
	},
}

Nginx配置

Nginx配置,只需要加一个 gzip_static on;就可以了

server {
        listen       80;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
            gzip_static on;
	}
}

效果

执行打包后，压缩了4倍


查看nginx启动是否成功使用gzip