react性能优化篇之umi.js打包去掉console和开启gzip压缩

本人已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本次打包针对react --version 17.0.2 和 umi --verison 3.5

版本上下浮动一下没问题，也可以适用

参考如下👇

一、去除console

第一步： 安装 babel-plugin-transform-remove-console 插件

npm install babel-plugin-transform-remove-console

第二步：在config.ts或.umirc.ts中进行配置

图例👇

代码👇

//在生产环境中取消console
extraBabelPlugins: [isProd ? 'transform-remove-console' : '']
//或者
//在所有环境中取消console
extraBabelPlugins: [transform-remove-console]

完成！！！

二、开启gzip压缩

gzip压缩是前端性能优化的一种手段，减少build之后包的体积，加快首屏渲染速度。

第一步：安装 compression-webpack-plugin 插件

npm install compression-webpack-plugin

第二步：在config.ts或.umirc.ts中进行配置

图例👇

代码👇

chainWebpack: function (config, { webpack }) {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 1000,
          minChunks: 2,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource)
              },
              priority: 10,
            },
          },
        },
      },
    })
    //在生产环境开启gzip压缩
    if (isProd) {
      // Gzip压缩
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
        {
          test: /\.(js|css|html)$/i, // 匹配
          threshold: 10240, // 超过10k的文件压缩
          deleteOriginalAssets: false, // 不删除源文件
        },
      ])
    }
  }

配置完成后使用npm run build 打包

查看dist文件夹中出现了.gz结尾的压缩包，就是压缩成功了

图例👇

但是到这里还没完，还需要，到这里只是前端完成了gzip压缩。如果在项目中需要gzip压缩之后的压缩文件。还需要后端在nginx中配置 gzip_static on

//nginx 配置
gzip_static  on  //检测是否存在gzip文件，有，则返回给客户端

最后，运行项目，找一个css或者js或者html后缀的文件，查看响应头中的 Content-Encoding 字段。显示为gzip则表示gzip在项目中使用成功。

图例👇

到此。gzip压缩开启完成！！

如果使用的是umi@4.x版本并且只希望删除console.log的情况

在.umirc.ts/js 文件下的extraBabelPlugins的属性中添加 ['transform-remove-console', { exclude: ['error', 'warn'] }]即可。

extraBabelPlugins:[
    ['transform-remove-console', { exclude: ['error', 'warn'] }]
]

注意哦。这样配置会让你在任何情况下都无法展示console.log。所以配置时需要先判断一下当前环境，如果是生产环境，则配置当前属性。如下