Webpack生产模式下使用Uglify keep_fnames出现类名重复问题咨询

这个问题我之前在开发类库的时候也踩过坑——依赖Function.prototype.name确实在生产环境的代码混淆环节容易出问题，结合你遇到的Webpack混淆导致name异常、开keep_fnames又类名重复的情况，给你几个实用的解决方案：

方案1：手动指定静态标识符（最推荐，代码健壮性最高） #

完全脱离对自动生成的name属性的依赖，给每个Section类手动添加一个静态属性作为标识，混淆器不会主动修改你自定义的静态属性：

class FooSection {
  // 手动定义唯一标识，不受混淆影响
  static sectionKey = 'FooSection';
}
class BarSection {
  static sectionKey = 'BarSection';
}
class Page {
  constructor(sections) {
    for (let SectionClass of sections) {
      // 使用自定义的静态属性代替name
      this[SectionClass.sectionKey] = new SectionClass(this);
    }
  }
}
let page = new Page([FooSection, BarSection]);

这种方式的优势在于：代码本身不依赖任何打包工具的配置，不管后续换Webpack还是其他构建工具，都不会出现兼容问题；你还可以根据需求自定义更友好的键名，不一定和类名完全一致。

方案2：精准配置混淆工具，只保留需要的类名 #

如果不想修改业务代码，可以调整Webpack的混淆插件配置（Webpack5默认用TerserPlugin替代旧版的Uglify），只保留你需要的Section类的名称，避免全局开启keep_fnames导致的类名重复和体积冗余：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          // 用正则匹配需要保留名称的类
          keep_classnames: /FooSection|BarSection/,
          keep_fnames: /FooSection|BarSection/,
        },
      }),
    ],
  },
};

注意：如果你还在使用旧版Webpack + UglifyJSPlugin，配置逻辑类似，把terserOptions换成Uglify对应的配置项即可。这种方式的好处是不用改业务代码，但需要维护正则里的类名列表，类多的时候会有点繁琐。

方案3：使用映射表关联类与标识（适合大量类的场景） #

如果你的Section类数量很多，手动给每个类加静态属性太麻烦，可以创建一个独立的映射表，把类和对应的键名绑定：

// 单独维护类与键名的映射关系
const sectionKeyMap = new Map([
  [FooSection, 'FooSection'],
  [BarSection, 'BarSection'],
]);

class Page {
  constructor(sections) {
    for (let SectionClass of sections) {
      const key = sectionKeyMap.get(SectionClass);
      if (key) {
        this[key] = new SectionClass(this);
      }
    }
  }
}

这种方式灵活性很高，你可以动态修改映射关系，甚至从配置文件里读取键名，而且混淆器不会修改映射表中的字符串键，稳定性有保障。

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