webpack打包，Tomcat 和 nginx 开启gzip压缩

Tomcat 和 nginx 启用 gzip压缩

前端代码通过webpack打包之后，体积大大减小，但是有时候项目引入过多插件，会导致打包后的文件已然很大，受带宽显示，客户端浏览器访问体验较差。其中一个优化方案是通过极限压缩，即 gzip压缩。大小大约是未压缩的三分之一。

一. 前端打包开启gzip

//压缩gzip格式 
const CompressionPlugin = require('compression-webpack-plugin');
new CompressionPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/
}),

仅仅是生成gzip文件，浏览器访问并不会自动识别，也不能直接引入gzip文件，需要服务器端开启gzip访问权限。

二. 使用gzip文件

1. Tomcat 开启允许gzip访问

// 打开 %TOMCAT_HOME%/conf/server.xml
//增加配置:
<Connector port="8085" protocol="HTTP/1.1"
    connectionTimeout="20000"
    compression="on"  // 开启压缩 (on|off)
    compressionMinSize="2048" // 启用压缩的输出内容大小，默认2KB
    noCompressionUserAgents="gozilla, traviata"  // 配置不开启压缩浏览器
    compressableMimeType="text/html,text/xml,text/plain,text/css,application/javascript" //设置压缩文件
    useSendfile="false"
//useSendfile属性默认为true, 会禁用压缩, 需要设置为false
/>

2. Nginx 开启允许gzip访问

http {
  # 开启gzip
  gzip on;
  # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
  gzip_min_length 1k;
  # gzip 压缩级别 1-10 
  gzip_comp_level 2;
  # 进行压缩的文件类型。
  gzip_types text/plain application/javascript application/x-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;
}

2. 实验效果

原始文件

Tomcat压缩开启之前

① Tomcat压缩开启之后

② nginx压缩开启之后

设置等级： gzip_comp_level 2

设置等级： gzip_comp_level 6

试了几次之后发现，总体上大约就是压缩三分之一左右，提升还是相当明显的，在带宽固定的情况下，访问速速显著提升。

参考博客：
nginx缓存配置及开启gzip压缩