Vue.js项目Webpack打包后多个自定义类名被统一重命名为n如何解决

方案1：优先采用静态属性显式声明标识（最稳定） #

完全规避构建工具对类名的压缩影响，不需要改构建配置，兼容性最强，是推荐的首选方案。
代码示例：

// 每个类新增静态属性存储固定标识
class Custom1 extends Model {
  static IDENTIFIER = 'Custom1'
  /* 其余原有逻辑 */
}
class Custom2 extends Model {
  static IDENTIFIER = 'Custom2'
  /* 其余原有逻辑 */
}
class Custom3 extends Model {
  static IDENTIFIER = 'Custom3'
  /* 其余原有逻辑 */
}

// 使用时替换为取静态属性
var myDataObject = {};
myDataObject[Custom1.IDENTIFIER] = 'value 1';
myDataObject[Custom2.IDENTIFIER] = 'value 2';
myDataObject[Custom3.IDENTIFIER] = 'value 3';

方案2：修改Webpack压缩配置保留类名 #

如果不想改动原有业务代码，可以调整生产环境的压缩配置，强制保留类名。你遇到的类名被压缩为n是因为生产打包时terser-webpack-plugin默认会混淆缩短类名来减少打包体积，调整配置即可：

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

module.exports = {
  // 其余原有配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        // 如果你想只针对指定目录的类保留名称，可以加include缩小生效范围，避免全局开启增加打包体积
        // include: /src\/models/,
        terserOptions: {
          compress: {
            keep_classnames: true
          },
          mangle: {
            keep_classnames: true
          }
        }
      })
    ]
  }
}

如果项目使用了Babel转译类，还要同步修改Babel配置：

// .babelrc 或 babel.config.json 配置
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "keepClassNames": true
    }]
  ]
}

方案优劣对比 #

• 方案1：无构建配置依赖，不会因为后续升级构建工具、更换压缩插件出现问题，对打包体积无任何影响，优先推荐
• 方案2：不需要改动业务代码，但全局开启会小幅增加打包体积，且更换构建工具时需要同步调整配置

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