1.本地联调时开启gzip压缩

devServer: {
    compress: true, // 启用 gzip compression：
},

2.采用压缩插件

2.1 安装插件 npm install compression-webpack-plugin --save-dev

2.2 配置插件 vue.config.js文件 或者 webpack.config.js文件

1. 一般压缩文本类文件；
2. 图片/mp3文件,压缩率小,不必压缩；
3. 比较小的文件不必压缩，耗费cpu资源；

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = { 
    plugins: [ 
        new CompressionPlugin({ 
            algorithm: 'gzip', // 使用gzip压缩 
            test: /\.js$|\.html$|\.css$/, // 匹配文件名 
            filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz) 
            minRatio: 1, // 压缩率小于1才会压缩 
            threshold: 10240, // 对超过10k的数据压缩 
            deleteOriginalAssets: false, // 是否删除未压缩的源文件
        }), 
    ],
};

3.Nginx开启相关gzip设置

server { 
    gzip on; 
    gzip_static on; 
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; 
    gzip_proxied any; 
    gzip_vary on; 
    gzip_comp_level 6; 
    gzip_buffers 16 8k; 
    # 注：99.99%的浏览器基本上都支持gzip解压了，所以可以不用设这个值,保持系统默认即可。 
    gzip_http_version 1.1; 
    ... 
}