一、配置vue
1.安装compression-webpack-plugin插件
npm i -D compression-webpack-plugin@3.0.0
2.在vue.config.js中添加如下配置
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,
minRatio: 0.8
})
]
},
}
3.打包
npm run build
二、nginx开启gzip
1.配置nginx.conf
http {
#开启或关闭gzip on off
gzip on;
#不使用gzip IE6
gzip_disable "msie6";
#是否开启gzip静态资源
gzip_static on;
#gzip压缩最小文件大小,超出进行压缩(自行调节)
gzip_min_length 100k;
#buffer 不用修改
gzip_buffers 4 16k;
#压缩级别:1-10,数字越大压缩的越好,时间也越长
gzip_comp_level 3;
# 压缩文件类型
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
}
2.重启nginx
systemctl restart nginx