Vue cli3.x 开启gzip，优化速度

liam 1/8/2020 Vue

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度，对于用户量多的网站，开启gizp压缩会大大降低服务器压力，提高加载速度，降低服务器流量成本。

# 安装compression-webpack-plugin

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

# vue.config.js配置Gzip压缩

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
  
module.exports = {
     //统一配置打包插件
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                threshold: 10240,//对10K以上的数据进行压缩
                minRatio: 0.8,
                deleteOriginalAssets:false,//是否删除源文件
            })
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改后记得执行 nginx -s reload, 一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip