生产构建后Uglify/Webpack导致所有类名均为'e'的问题排查

这问题我太熟了！本质就是生产构建时的代码混淆压缩把你的类名给改成e、t这类短标识符了，导致原本依赖constructor.name和类名匹配的逻辑彻底失效。下面给你几个靠谱的解决办法，按优先级推荐：

1. 手动固定type属性（最推荐，可靠且无额外配置） #

别再依赖this.constructor.name这种动态值了，直接在每个子类里显式声明固定的type字符串：

// 基类可以去掉原来的type定义，或者留着作为 fallback
class BaseNode {}

// 子类1
class Class1 extends BaseNode {
  type = 'Class1' // 直接写死字符串，不会被混淆
}

// 子类2
class Class2 extends BaseNode {
  type = 'Class2'
}

还原对象的时候，直接用字符串匹配：

function restoreNode(obj) {
  switch(obj.type) {
    case 'Class1':
      return Object.assign(new Class1(), obj);
    case 'Class2':
      return Object.assign(new Class2(), obj);
    // ...其他类型
    default:
      throw new Error('Unknown node type');
  }
}

这种方法完全不受压缩混淆的影响，是最稳定的方案，而且代码可读性也更高。

2. 配置构建工具禁用类名混淆 #

如果你坚持想用类名来匹配，可以修改Quasar的Webpack配置，让Terser（现在Quasar默认用Terser替代Uglify了）保留类名和函数名。

在你的quasar.conf.js里找到build配置项，添加extendWebpack来修改Terser的选项：

module.exports = function (ctx) {
  return {
    // ...其他配置
    build: {
      // ...其他build配置
      extendWebpack(cfg) {
        // 找到Terser插件
        const terserPlugin = cfg.optimization.minimizer.find(minimizer => minimizer.constructor.name === 'TerserPlugin');
        if (terserPlugin) {
          terserPlugin.options.terserOptions = {
            ...terserPlugin.options.terserOptions,
            keep_classnames: true, // 保留类名
            keep_fnames: true // 保留函数名（如果你的类是用函数定义的话需要这个）
          }
        }
      }
    }
  }
}

注意：这么做会让压缩后的包体积稍微变大一点，因为类名没有被缩短，但如果你的类数量不多，影响可以忽略。

3. 使用枚举统一管理类型（更规范的进阶方案） #

如果你的节点类型较多，或者想避免硬编码字符串，可以用枚举来统一管理类型标识：

// 定义枚举
const NodeType = {
  CLASS_1: 'Class1',
  CLASS_2: 'Class2',
  CLASS_3: 'Class3'
};

// 子类里使用枚举值
class Class1 extends BaseNode {
  type = NodeType.CLASS_1
}

// 还原时也用枚举匹配
function restoreNode(obj) {
  switch(obj.type) {
    case NodeType.CLASS_1:
      return Object.assign(new Class1(), obj);
    // ...其他类型
  }
}

这种方案的好处是类型标识集中管理，后期修改或者新增类型时更方便，也减少了拼写错误的概率。

为什么开发环境没问题？ #

开发环境下Quasar默认不会开启代码混淆压缩，类名会保持你写的原样，所以this.constructor.name和Class1.name都是"Class1"，匹配自然没问题；但生产环境为了减小包体积，会把类名替换成短标识符，导致两者不匹配，还原逻辑就失效了。

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