JavaScript中如何安全使用对象名称，规避混淆与压缩的影响？

在生产环境中，代码压缩工具（比如Terser）会把变量、函数名改成短标识符，导致原本的.name属性值丢失。下面是几种可行的解决方案：

• 手动显式设置name属性
  ES6+中函数的name属性是可配置的，你可以直接给函数赋值原始名称，压缩工具不会修改这个手动设置的属性值：

  const getFullName = () => {};
  getFullName.name = 'getFullName';
  
  console.log(getFullName.name); // 压缩后仍输出'getFullName'
  

  这种方式简单直接，适合少量函数或对象的场景。

• 用装饰器批量处理
  如果你的项目支持装饰器（TypeScript或配置Babel开启），可以写一个通用装饰器来自动保留函数名：

  function preserveName(target, propName, descriptor) {
    descriptor.value.name = propName;
    return descriptor;
  }
  
  // 类方法使用
  class UserUtils {
    @preserveName
    getFullName() {}
  }
  
  // 普通函数使用
  const getFullName = preserveName(null, 'getFullName', { value: () => {} }).value;
  

  批量处理时效率更高，不用逐个手动赋值。

• 配置构建工具跳过特定标识符压缩
  以Webpack的TerserPlugin为例，你可以配置保留指定的函数/变量名，告诉压缩工具不要修改它们：

  // webpack.config.js
  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            // 只保留指定的名称，避免全局保留增大打包体积
            reserved: ['getFullName', 'calculateAge']
            // 全局保留所有函数名（不推荐，会增加包体积）：keep_fnames: true
          }
        })
      ]
    }
  };
  

  注意全局开启keep_fnames会显著增加打包后的代码体积，建议只保留真正需要的标识符。

• 使用字符串常量替代.name属性
  最稳妥的方式是直接把名称存为字符串常量，完全不受压缩工具影响：

  const GET_FULL_NAME = 'getFullName';
  const getFullName = () => {};
  
  console.log(GET_FULL_NAME); // 始终输出'getFullName'
  

  唯一的小缺点是重命名时需要同时修改常量和函数名，但IDE的批量重命名工具可以轻松解决这个问题。

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