1 compression webpack plugin 插件安装
npm install compression-webpack-plugin --save-dev
or
yarn add -D compression-webpack-plugin
or
pnpm add -D compression-webpack-plugin
2 修改vue.config.js文件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
// production模式下，plugins中添加文件压缩处理器
plugins: [
new CompressionWebpackPlugin({
test: /\.js|\.css/, // 对匹配的文件进行压缩
threshold: 10240, // 对超过10k的数据进行压缩
deleteOriginalAssets: false // 是否删除源文件
})
]
}
}
}
}
3 服务器端如何启用gzip (nginx)
#开启gzip
gzip on;
#低于1kb的资源不压缩
gzip_min_length 1k;
#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。
gzip_comp_level 5;
#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6].";
#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;
