React项目升级依赖后Webpack打包类名修改问题求助

针对Webpack（含Create React App）项目的配置 #

升级依赖后，原有的keep_class_names配置可能因Terser/TerserPlugin版本变更失效，需调整配置写法：

1. 自定义Webpack配置（或eject后的CRA项目） #

直接修改webpack.config.js中的优化项：

module.exports = {
  optimization: {
    minimizer: [
      new require('terser-webpack-plugin')({
        terserOptions: {
          // 注意部分版本为小写蛇形命名，部分版本支持驼峰keepClassNames
          keep_classnames: true,
          keep_fnames: true, // 若需保留函数名可同时添加
        },
      }),
    ],
  },
};

如果小写配置不生效，尝试替换为驼峰式：

terserOptions: {
  keepClassNames: true,
  keepFnames: true,
}

2. 未eject的Create React App项目 #

借助customize-cra和react-app-rewired覆盖默认配置，在config-overrides.js中添加：

const { override, addTerserPlugin } = require('customize-cra');

module.exports = override(
  addTerserPlugin({
    terserOptions: {
      keep_classnames: true,
      keep_fnames: true,
    },
  })
);

针对Vite项目的配置 #

Vite默认用Esbuild压缩，若类名被修改，需对应调整构建配置：

1. 保留Esbuild压缩的情况 #

修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'esbuild',
    esbuild: {
      keepNames: true, // 该选项会保留类名与函数名
    },
  },
});

2. 切换为Terser压缩的情况 #

若Esbuild配置无法满足需求，可改用Terser：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'terser',
    terserOptions: {
      keep_classnames: true,
      keep_fnames: true,
    },
  },
});

排查关键点 #

升级后出现问题通常是压缩工具版本变更导致默认行为或配置项变化：

• 检查package.json中terser、terser-webpack-plugin或vite的版本，对照官方文档确认配置项格式
• 若为CRA升级，新版本可能调整了默认压缩规则，需显式覆盖配置

验证配置有效性 #

打包完成后可通过两种方式验证：

• 打开打包后的JS文件，搜索目标类名（如File），确认未被修改
• 在代码中通过File.name获取类名，在浏览器控制台打印，确认输出为原类名而非<dir_name>_File

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