前端打包部署优化之gzip

使用webpack打包出来的文件过大，导致访问速度极其慢，搜索webpack打包优化，能够看到很多前辈的建议：gzip。
即打包出一份gzip文件，让服务端返回压缩后的文件，从而加快访问速度。
我使用tomcat，分两步走：

一、打包配置

1、安装compression-webpack-plugin

npm i -D compression-webpack-plugin@1.1.12

注意：要指定版本，不然安装太高版本总是报错没有asset属性

2、添加webpack配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');

config.plugins.push(
  new CompressionWebpackPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp('\\.(js|css)$'),
    threshold: 10240,
    minRatio: 0.8
  })
);

二、tomcat配置

修改conf/server.xml文件

配置server.xml

找到<Connector>标签，添加代码

compressableMimeType="text/html,text/plain,text/xml,application/javascript,text/css,text/plain,application/json"
noCompressionUserAgents="gozilla, traviata"
compressionMinSize="2048"
compression="on"
useSendfile="false"

配置server.xml