config-overrides.js

const rewireStyledComponents = require('react-app-rewire-styled-components')
const CompressionPlugin = require("compression-webpack-plugin");

/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireStyledComponents(config, env)

  config.optimization = {
    ...config.optimization,
    moduleIds: 'named',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](ethers|@ethersproject)[\\/]/,
          name: 'ethers',
          chunks: 'all'
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          // cacheGroupKey here is `commons` as the key of the cacheGroup
          name(module, chunks, cacheGroupKey) {
            const moduleFileName = module
              .identifier()
              .split('/')
              .reduceRight((item) => item);
            const allChunksNames = chunks.map((item) => item.name).join('~');
            return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`;
          },
          chunks: 'all',
        },
      }
    }
  }

  return {
    ...config,
    plugins: [
      ...config.plugins,
      new CompressionPlugin()
    ]
  }
}