Ant Design Pro 2(GZIP压缩优化)

相关资料

Ant Design Pro 2 官方地址
https://pro.antdv.com/
官方源码git地址
https://github.com/vueComponent/ant-design-vue-pro.git

本地开发环境，会有误差

node v15.14.0
yarn v1.22.0
@vue/cli v4.5.12
ant-design-vue v1.7.2
vue-antd-pro v3.0.0

1、项目根目录下执行

#compression-webpack-plugin不确定高版本的相关依赖是否兼容，所以用1.1.12吧
yarn add [email protected]

2、修改根目录下的vue.config.js文件

## 顶部文件引入，用require
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const prodGzipList = ['js', 'css']

3、找到chainWebpack方法，在方法中加入

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

image.png

4、nginx开启gzip处理

• 如果是直接部署在tomcat下的，请参考这个优化ant design pro打包之后vendors.async.js文件大的问题

  gzip on;
  gzip_min_length  1k;
  gzip_buffers     4 32k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types       text/plain application/x-javascript text/css application/xml;
  gzip_vary on;
  gzip_disable "MSIE [1-6].";

5、最后效果，yarn run build 编译后会在js\css目录下出现gz格式压缩包，附上几张图

image.png

image.png

image.png

image.png

优化还在继续，虽然项目上配置了cdn加速缓存，但是我们自己软件本身能优化尽量优化，有时候不在意的几M带宽，可能带来的就是几百上千的资源包支出。
这个锅，咱们不背~~