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