vue-cli中配置gzip压缩
1. 引入依赖compression-webpack-plugin2. vue.config.js配置
·
对于静态资源,有两种开启压缩的方式,一种是compress in time
,一种是precompression
。
第一种方式是在服务端实时压缩,第二种方式是在前端预先压缩了。这样当HTTP请求到达之后,直接响应已经压缩过的文件,可以节约服务器的cpu
下面介绍的是第二种方式如何配置,只记录前端部分的配置,(因为服务器nginx那边不是咱们配的咱们也就是不太清楚
示例基于
vue:"^2.6.11"
vue-cli:"~4.5.0"
1. 引入依赖compression-webpack-plugin
这里最好带一个版本,不要太高,之前默认安装了最新版本打包会报错,我这里就选了5.0.0
npm install --save-dev compression-webpack-plugin@5.0.0
2. vue.config.js配置
vue-cli4.x项目默认没有vue.config.js(3.x同样没有),请手动创建
配置如下:
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
module.exports = {
productionSourceMap: false,
configureWebpack: config => {
// 生产环境相关配置
if (isProduction) {
//gzip压缩
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
}
};
效果不错!
参考博文:
这一篇里面也有介绍nginx中如何配置:https://juejin.cn/post/6844904071896236040
https://blog.csdn.net/weixin_39683021/article/details/112351698
更多推荐
已为社区贡献3条内容
所有评论(0)