React生产环境自定义/控制组件名压缩规则 无需sourcemap方案

解答 #

通用适配逻辑（所有React项目通用） #

生产环境组件名被压缩的核心原因是代码压缩工具（默认使用terser）会移除不必要的标识符来减小产物体积，你只需要调整压缩规则，保留React组件对应的标识符即可。
在webpack的terser配置中添加以下规则即可，该规则仅保留首字母大写的类名和函数名（符合React组件命名规范），不会暴露其他业务代码的内部命名，也不需要生成完整sourcemap：

terserOptions: {
  keep_classnames: /^[A-Z]/, // 保留首字母大写的类名，适配类组件
  keep_fnames: /^[A-Z]/ // 保留首字母大写的函数名，适配函数组件
}

不同框架的具体配置方案 #

1. CRA项目
   CRA默认隐藏了webpack配置，你可以通过eject命令暴露配置，或者使用craco、react-app-rewired第三方工具覆盖配置，将上述terser规则添加到对应配置段即可。

2. Next.js项目
   在项目根目录的next.config.js中添加以下配置：

module.exports = {
  webpack: (config, { dev, isServer }) => {
    // 仅针对客户端生产环境生效
    if (!dev && !isServer) {
      const TerserPlugin = require('terser-webpack-plugin');
      config.optimization.minimizer = config.optimization.minimizer.map(plugin => {
        if (plugin instanceof TerserPlugin) {
          plugin.options.terserOptions.keep_classnames = /^[A-Z]/;
          plugin.options.terserOptions.keep_fnames = /^[A-Z]/;
        }
        return plugin;
      });
    }
    return config;
  }
}

3. Gatsby项目
   在项目根目录的gatsby-node.js中添加以下配置：

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  // 仅针对生产构建阶段生效
  if (stage === 'build-javascript') {
    const config = getConfig();
    const TerserPlugin = require('terser-webpack-plugin');
    config.optimization.minimizer = config.optimization.minimizer.map(plugin => {
      if (plugin instanceof TerserPlugin) {
        plugin.options.terserOptions.keep_classnames = /^[A-Z]/;
        plugin.options.terserOptions.keep_fnames = /^[A-Z]/;
      }
      return plugin;
    });
    actions.replaceWebpackConfig(config);
  }
};

特殊场景补充 #

如果部分被高阶组件包裹的组件名依然显示异常，可以手动给组件设置displayName属性，该属性优先级最高，不受压缩规则影响：

const MyComponent = () => <div>示例内容</div>
MyComponent.displayName = 'MyComponent'

内容的提问来源于stack exchange，提问作者Gangula