前端性能优化——使用GZIP压缩

前端项目的脚手架以vue-cli4 为基础搭建

一、什么是GZIP

       GZIP是网站压缩加速的一种技术，对于开启后可以加快我们网站的打开速度。经过服务器压缩，客户端浏览器快速解压，可以大大减少网站的流量。

二、理解GZIP压缩

  比如nginx给你返回js文件的时候，会判断是否开启gzip，然后压缩后再还给浏览器。
   但是nginx其实会先判断是否有.gz后缀的相同文件，有的话直接返回，nginx自己不再进行压缩处理。
   而压缩是要时间的！不同级别的压缩率花的时间也不一样。所以提前准备gz文件，可以更加优化。而且你可以把压缩率提高点，这样带宽消耗会更小

三、vue中怎么使用

在vue中集成插件compression-webpack-plugin

配置如下

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入
...
...
configureWebpack: config => {
        
        // 需要 npm i -D compression-webpack-plugin
        const plugins = [];
         plugins.push(new CompressionWebpackPlugin({
             filename: "[path].gz[query]",  //压缩后的文件策略
             algorithm: "gzip",             //压缩方式
             test: productionGzipExtensions,//可设置需要压缩的文件类型
        //     include:'', //符合任何这些条件的文件
        //     exclude:'',//排除压缩的文件
            threshold: 10240, //大于10240字节的文件启用压缩
            minRatio: 0.8 // 压缩比率大于等于0.8时不进行压缩
             deleteOriginalAssets: false,//是否删除压缩前的文件，默认false
        }));

        config.plugins = [...config.plugins, ...plugins];
    },

四、服务器配置

 只在前端生成好gzip文件，还未能达到我们前端优化的目的。需要在服务器端开启gzip的配置才可以。

tomcat 或者 nginx 都可以添加gzip配置，如何配置可查阅相关资料，不再赘述。