Vue 开启gizp

项目配置

1. 首先安装 compression-webpack-plugin

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

2. 在 vue.config.js 里面配置 compression-webpack-plugin

   const CompressionWebpackPlugin = require("compression-webpack-plugin");
   const productionGzipExtensions = ["js", "css"];
   
    configureWebpack: {
    plugins: [
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]',   // 提示compression-webpack-plugin@3.0.0的话asset改为filename
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240,
            minRatio: 0.8
        }),
    ]
   

Nginx 配置

	server {
	    listen 4300;
	    server_name localhost;
	    location / {
	        root   html;
	        index  index.html index.html;
	        index /index.html;
	        try_files $uri $uri/ /index.html last;
	        gzip_static on; #静态压缩
	    }
	}