内容简介:之前前端性能优化的接触的比较少,随着项目的增大,性能问题就出来了,之前想到的性能优化是减少Http请求,但是这并不是单单能自己控制的,这要涉及到业务和后端逻辑也不好更改,想到之前跟着大佬做项目用到了Gzip,就想来学习一下。GZIP就是通过HTTP压缩来优化性能,HTTP压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求服务器对应资源后,从服务器端将资源文件压缩,再输出到客户端,由客户端的浏览器负责解压缩并浏览。用vue-cli搭建的项目会配置有Gzip,只需要更改一下配置文件和安装一下依赖就可以使用
之前前端性能优化的接触的比较少,随着项目的增大,性能问题就出来了,之前想到的性能优化是减少Http请求,但是这并不是单单能自己控制的,这要涉及到业务和后端逻辑也不好更改,想到之前跟着大佬做项目用到了Gzip,就想来学习一下。
GZIP就是通过HTTP压缩来优化性能,HTTP压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求服务器对应资源后,从服务器端将资源文件压缩,再输出到客户端,由客户端的浏览器负责解压缩并浏览。
vue项目配置
用vue-cli搭建的项目会配置有Gzip,只需要更改一下配置文件和安装一下依赖就可以使用了.
<!--config/index.js--> productionGzip: true, //是否开启Gzip压缩 productionGzipExtensions: ["js", "css"], 复制代码
留意一下备注哦
<!--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文件
再来dist文件夹看下,可以看到压缩后会比之前的文件小好多。
tomcat 服务端
接下来就是配服务器了,但是我不会啊。。。这位大佬写的比较全面,tomcat的可以去看一下。
nginx 服务端
如果是nginx 服务的,找到nginx配置文件在 http 配置里面添加如下代码,然后重启nginx服务即可。
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性能优化主要分为两部分。记录一下以防忘记。哈哈,掘金是个好东西。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法导论(原书第2版)
[美] Thomas H.Cormen、Charles E.Leiserson、Ronald L.Rivest、Clifford Stein / 潘金贵 等 / 机械工业出版社 / 2006-9 / 85.00元
这本书深入浅出,全面地介绍了计算机算法。对每一个算法的分析既易于理解又十分有趣,并保持了数学严谨性。本书的设计目标全面,适用于多种用途。涵盖的内容有:算法在计算中的作用,概率分析和随机算法的介绍。书中专门讨论了线性规划,介绍了动态规划的两个应用,随机化和线性规划技术的近似算法等,还有有关递归求解、快速排序中用到的划分方法与期望线性时间顺序统计算法,以及对贪心算法元素的讨论。此书还介绍了对强连通子图......一起来看看 《算法导论(原书第2版)》 这本书的介绍吧!