1.安装compression-webpack-plugin(我这边用的是^6.1.1)
2. vue.config.js配置
// 引入插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
chainWebpack(config) {
....其他配置..
config
.when(process.env.NODE_ENV !== 'development',
config => {
config.plugin('compressionPlugin').use(
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
filename: '[path][base].gz', // 压缩后的文件名(保持原文件名,后缀加.gz)
minRatio: 1, // 压缩率小于1才会压缩
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false
})
)
})
}
3. nginx配置
gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
4.浏览器上查看
有gzip则代表成功