如何在TypeScript中移除日志语句以优化应用性能

要实现像C语言中通过预编译指令完全移除调试代码（包括高成本的参数计算），可以用以下几种方案，核心是让TypeScript或打包工具在编译/构建阶段识别并删除无用的调试代码：

方案1：常量布尔值+打包工具死代码消除（最简单，无需额外依赖） #

利用const定义编译时常量，配合webpack/Rollup/Terser的死代码消除功能，直接移除整个调试代码块。

步骤： #

1. 定义全局常量（可通过环境变量注入）：

// 直接写死或从环境变量获取
const DEBUG = process.env.NODE_ENV === 'development';

2. 调用调试代码时用if (DEBUG)包裹：

// 无需额外封装log函数，直接用console.log或自定义函数
if (DEBUG) {
  console.log(`hi mom! ${Factory.createDebugStatement()}`);
}

原理： #

因为DEBUG是编译时常量，TypeScript会向打包工具标记这个条件的真假；Terser等压缩工具会自动移除false分支的所有代码，包括Factory.createDebugStatement()的调用——这部分代码根本不会出现在最终构建产物里。

优缺点： #

• ✅ 无需额外依赖，配置简单
• ❌ 每个调试调用都要写if (DEBUG)包裹

方案2：TypeScript宏转换器（最接近C的#define体验） #

用typescript-transformer-macros这类工具实现宏定义，编译时直接替换或移除调试代码，无需手动写条件判断。

步骤： #

1. 安装依赖：

npm install typescript-transformer-macros ts-patch --save-dev

2. 配置tsconfig.json启用转换器：

{
  "compilerOptions": {
    "plugins": [
      { "transform": "typescript-transformer-macros" }
    ]
  }
}

3. 定义调试宏：

import { macro } from 'typescript-transformer-macros';

// 可通过环境变量控制
const DEBUG = process.env.NODE_ENV === 'development';

// 定义宏函数，编译时自动替换代码
export const debugLog = macro((...args: any[]) => {
  if (DEBUG) {
    // 编译后替换为console.log调用
    return `console.log(${args.map(arg => arg).join(', ')})`;
  } else {
    // 编译后替换为空语句，完全移除调试代码
    return 'void 0';
  }
});

4. 在代码中直接调用：

debugLog(`hi mom! ${Factory.createDebugStatement()}`);

原理： #

宏转换器在TypeScript编译阶段就会处理debugLog调用：

• 当DEBUG为true，编译为正常的console.log调用
• 当DEBUG为false，编译为void 0，参数部分的代码完全不会被保留，自然不会执行Factory.createDebugStatement()

优缺点： #

• ✅ 完全模拟C的宏体验，无需手动写条件判断
• ❌ 需要额外配置转换器，对构建流程有一定侵入

方案3：自定义类型保护+工具函数（折中方案） #

封装一个工具函数，结合类型断言让TypeScript识别死代码，同时减少重复代码。

实现： #

const DEBUG = process.env.NODE_ENV === 'development';

// 类型保护函数，告诉TypeScript这是编译时常量
function isDebug(): asserts this is { DEBUG: true } {
  if (!DEBUG) throw new Error('Debug is disabled');
}

// 封装调试函数
function debugLog(...args: any[]) {
  if (DEBUG) {
    console.log(...args);
  }
}

// 调用方式（可选两种）：
// 方式1：用类型保护包裹批量调试代码（推荐高成本参数场景）
if (DEBUG) {
  debugLog(`hi mom! ${Factory.createDebugStatement()}`);
  // 其他调试代码...
}

// 方式2：直接调用，但注意：参数仍会被计算（仅函数体被移除）
// 这种方式不适合高成本参数的场景
debugLog(`hi mom! ${Factory.createDebugStatement()}`);

注意： #

方式2中，即使DEBUG为false，Factory.createDebugStatement()还是会被执行，因为函数调用前会先计算参数。所以高成本参数的场景必须用方式1。

关键注意事项 #

• 必须用const定义DEBUG，不能用let——let是变量，编译器无法确定其值，无法触发死代码消除。
• 确保打包工具开启了死代码消除：webpack默认在生产环境开启，Rollup需配置treeshake: true。

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