前端性能优化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性能优化主要分为两部分。记录一下以防忘记。哈哈，掘金是个好东西。