Vite+TypeScript项目未使用函数声明被移除的原因及解决方法咨询

为什么构建后函数被移除？ #

这是Vite生产构建阶段依赖的**Rollup Tree Shaking（摇树优化）**导致的。Rollup会通过静态分析识别代码中未被直接引用的“死代码”，并在打包时自动移除。

你的moveUp/moveDown等函数仅通过eval()做动态调用，Rollup的静态分析无法识别这种间接引用，会判定这些函数未被实际使用，因此在构建时将它们从打包产物中剔除。而开发环境下Vite的Tree Shaking策略更宽松，不会执行这么激进的删除逻辑，所以能正常运行。

你用“伪造遍历打印”能保留函数，本质是这种方式给了Rollup一个静态可检测的引用（比如console.log(this.moveUp)），让它认为这些函数被使用了，从而避免被摇掉。

如何优雅避免函数被移除？ #

推荐以下几种精准的解决方案，比伪造打印更合理：

1. 显式绑定方法到可访问对象（推荐） #

把需要暴露给eval的方法，通过静态可检测的方式绑定到全局或eval能访问的对象上，让Rollup识别到这些方法的引用：

class Player {
  moveUp() {
    // 你的业务实现
  }
  moveDown() {
    // 你的业务实现
  }
  moveLeft() {
    // 你的业务实现
  }
  moveRight() {
    // 你的业务实现
  }

  exposeMethods() {
    // 统一管理需要暴露的方法名
    const methodNames = ['moveUp', 'moveDown', 'moveLeft', 'moveRight'];
    const exposed: Record<string, () => void> = {};

    methodNames.forEach(name => {
      // 绑定this并挂载到对象上
      exposed[name] = this[name].bind(this);
    });

    // 挂载到全局，让eval可以访问
    (window as any).playerActions = exposed;
  }
}

// 实例化后调用暴露方法
const player = new Player();
player.exposeMethods();

这种方式下，Rollup能识别到methodNames中的字符串与类方法的关联，不会将这些方法判定为死代码。

2. 直接在构造函数中绑定全局引用 #

如果不需要统一管理暴露的方法，也可以直接在类的构造函数中把方法绑定到全局：

class Player {
  constructor() {
    // 绑定this并挂载到globalThis
    globalThis.moveUp = this.moveUp.bind(this);
    globalThis.moveDown = this.moveDown.bind(this);
    globalThis.moveLeft = this.moveLeft.bind(this);
    globalThis.moveRight = this.moveRight.bind(this);
  }

  moveUp() { /* ... */ }
  moveDown() { /* ... */ }
  moveLeft() { /* ... */ }
  moveRight() { /* ... */ }
}

这种写法让Rollup明确看到这些方法被赋值给了全局变量，自然不会将它们移除。

3. 标记文件为有副作用（不推荐，仅特殊场景使用） #

如果上述方法都不适用，可以在Vite配置中标记包含该类的文件为“有副作用”，让Rollup不对这个文件做Tree Shaking：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      treeshake: {
        // 替换为你的类所在文件路径
        moduleSideEffects: ['src/your-player-class-file.ts']
      }
    }
  }
});

注意：这种方式会保留文件内所有代码，可能导致打包体积增大，仅在必要时使用。

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