webpack性能优化：使用gzip压缩功能

vue设置gzip打包压缩

当前端项目过大时，可以利用nginx请求配置和webpack来使用gzip压缩功能；
Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法，比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络传输的数据量，提高了用户显示网页的速度。当然，同时会增加一点点服务器的开销。 本文从HTTP协议的角度，来理解HTTP压缩这个概念。

一、 安装webpack插件 compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

二、配置压缩选项
需要在config 配置gzip参数

 build: {
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,      //压缩开关
    productionGzipExtensions: ['js', 'css'],   

  }

还需要配置bulid/webpack.prod.conf.js 文件

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      // asset: '[path].gz[query]',
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

至此，vue部分的配置完成。可以使用npm run build后就会发现打包后的js文件都以gz后缀，即打包成功，打包好后会发现体积明显跟未压缩明显减少

三、nginx配置

在配置完Vue部分后直接部署到nginx上是不会生效的，还必须打开nginx的gzip功能才可以。这里以nginx-1.13.0为例，首先需要确认当前nginx是否拥有

gzip模块，一般情况下都会默认安装对应。运行以下命令

nginx -V 返回结果中会包含当前nginx启用了那些模块
如果返回结果中不包含gzip模块的话，可以重新编译nginx并安装相对应模块，找到nginx源码文件包，运行

./configure --with-所需要安装的模块名

在确认模块安装完毕之后，修改conf/nginx.conf文件，加入如下内容

#开启gzip功能
gzip on; 
#开启gzip静态压缩功能
gzip_static on; 
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10 
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;# 是否在http header中添加Vary: Accept-Encoding，建议开启gzip_vary on;

PS：
nginx在设置了gzip on 后就已经打开了gzip压缩功能，不过这时候nginx所使用的是动态压缩。在动态压缩的情况下nginx会自动的将文件压缩成.gz文件，这时候就算不配置vue也能达到一样的效果。

但是动态压缩无疑会占用服务器的资源来进行此操作。

相对的nginx提供了静态压缩模式，也就是gzip_static，在这个模式下nginx会去寻找对应文件的.gz文件，只有.gz文件不存在的时候才会去压缩对应文件。这样就不会过度占用服务器资源。

gzip_static功能依赖http_gzip_static_module 模块，一般不会默认安装此模块，可以使用上文提到的方法安装。

四、egg中间件压缩配置

在egg2.0的洋葱模型中中可以轻易配置中间件，可以轻松实现请求压缩

在中间件middleware 文件新增gizp.js，配置请求时会自动打包请求内容

/**
 * 请求压缩
 * @type {isJSON}
 */

const isJSON = require('koa-is-json');
const zlib = require('zlib');
module.exports = options => {
    return async function gzip(ctx,next) {
        await next();
        // 后续中间件执行完成后将响应体转换成 gzip
        let body = ctx.body;
        if (!body) return;
        // 支持 options.threshold
        if (options.threshold && ctx.length < options.threshold) return;
        if (isJSON(body)) body = JSON.stringify(body);
        // 设置 gzip body，修正响应头
        const stream = zlib.createGzip();
        stream.end(body);
        ctx.body = stream;
        ctx.set('Content-Encoding', 'gzip');
    };
};

在config/config.default.js 文件中配置中间加载

 // 配置需要的中间件，数组顺序即为中间件的加载顺序
    middleware: ['closeHandler','saveSession','errorHandler','gzip'],