以前前端性能优化的接触的比较少,随着项目的增大,性能问题就出来了,以前想到的性能优化是减小Http请求,可是这并非单单能本身控制的,这要涉及到业务和后端逻辑也很差更改,想到以前跟着大佬作项目用到了Gzip,就想来学习一下。javascript
GZIP就是经过HTTP压缩来优化性能,HTTP压缩能够大大提升浏览网站的速度,它的原理是,在客户端请求服务器对应资源后,从服务器端将资源文件压缩,再输出到客户端,由客户端的浏览器负责解压缩并浏览。php
用vue-cli搭建的项目会配置有Gzip,只须要更改一下配置文件和安装一下依赖就可使用了.css
<!--config/index.js-->
productionGzip: true, //是否开启Gzip压缩
productionGzipExtensions: ["js", "css"],
复制代码
留意一下备注哦html
<!--build/webpack.prod.conf.js-->
// 若是在../config/index.js中开启了Gzip ,记得安装npm install compression-webpack-plugin --save-dev
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // 以前这属性是asset,打包会报错 改为filename
algorithm: 'gzip',
test: new RegExp(
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
复制代码
配好上面两个文件,前端的基本就能够了,可是百度百科说到,打包可能会报错,有多是由于这个依赖compression-webpack-plugin的版本问题,卸载这个依赖在从新安装其余版本的就能够了。 好了,咱们来npm run build一下 , 咱们能够看到会比以前多出一些gz文件 前端
接下来就是配服务器了,可是我不会啊。。。这位大佬写的比较全面,tomcat的能够去看一下。vue
若是是nginx 服务的,找到nginx配置文件在 http 配置里面添加以下代码,而后重启nginx服务便可。java
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开启gzip性能优化主要分为两部分。记录一下以防忘记。哈哈,掘金是个好东西。webpack