前言:
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。在 Vue CLI3 中
webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
安装插件:
npm i -D compression-webpack-plugin
webpack配置
在 vue.config.js 中按照如下方式进行配置
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: config =>{
if(process.env.NODE_ENV === 'production'){
return {
plugins:[new Compression({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //大于10KB的文件进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
}
}
压缩对比:
兼容性及nginx配置
一般浏览器都已支持.gz的资源文件,在http请求的Request Headers 中能看到 Accept-Encoding:gzip
要使服务器返回.gz文件,还需要对服务器进行配置,根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
配置参考:配置参考
结语
Vue项目 GIZP 压缩优化就到这里了。希望大家能点赞评论!
如果喜欢本文的话,欢迎关注我的订阅号,漫漫技术路,期待未来共同学习成长。