umi配置gzip

配置项目

1.项目安装plugin

yarn add compression-webpack-plugin -D

2.config/config.js文件中添加配置

 const CompressionWebpackPlugin = require('compression-webpack-plugin');
const prodGzipList = ['js', 'css'];

chainWebpack: config => {
  if (process.env.NODE_ENV === 'production') {  // 生产模式开启
    config.plugin('compression-webpack-plugin').use(
      new CompressionWebpackPlugin({
        // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
        algorithm: 'gzip', // 指定生成gzip格式
        test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
        threshold: 10240, //对超过10k的数据进行压缩
        minRatio: 0.6 // 压缩比例，值为0 ~ 1
      })
    );
  }
}

3 打包
打包后dist目录下会出现压缩过的文件

部署

部署服务器这里用的是nginx
把dist下的资源部署上去后访问服务器后访问会发现服务器当然没有返回压缩过的版本

此时需要在nginx配置文件下添加一行配置，配置完了后会自动去寻找压缩过的资源

gzip_static on;

结果：

拿到了压缩过后的版本了