如何利用react-app-rewired，插入第三方插件配置，如Gzip打包

在打包上传服务器过程中，为了进行优化，可谓较劲脑汁，其中有一个方式，是利用gzip减少静态资源大小，这是个好主意，我打算尝试一下。

网上的提示是利用compression-webpack-plugin插件，但是这个插件需要先npm run eject，即生成webpack相关的一些文件，但是我想继续使用react-app-rewired做个性化配置，于是在网上找了很多相关知识。

在此总结一下。

1、需要的配置插件

yarn add react-app-rewired -s

yarn add react-app-rewire-compression-plugin -s

yarn add customize-cra -s

2、修改package.json文件内容

其中env-cmd是做动态配置的，你可以省去不加，其中eject，好像不支持react-app-rewired，会报错，相关文档上也没有修改

  "scripts": {
     
    "start": "react-app-rewired start",
    //"start:prod": "env-cmd -f .env.prod yarn start",
    "build": "react-app-rewired build",
    //"build:prod": "env-cmd -f .env.prod yarn build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "serve": "serve -s -l 80  build"
  }

3、在一级目录下新建config-overrides.js文件

4、添加插件配置

override会给函数传config和env相关参数

const {
      override, fixBabelImports } = require("customize-cra");
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');

// 在这里进行自定义修改相关配置
const replaceConfig = () => (config,env) => {
     
	// 在这里进行CompressionPlugin的配置
  config = rewireCompressionPlugin(config, env, {
     
    test: /\.js(\?.*)?$/i,
    cache: true
  })
  // 需要返回config对象
  return config;
};

module.exports = override(
	// 按需打包
  fixBabelImports("antd", {
     
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  }),
  fixBabelImports("react-use", {
     
    libraryName: "react-use",
    libraryDirectory: "lib",
    camel2DashComponentName: false,
  }),
  replaceConfig()
);

5、结果