TreeShaking中类的普通方法为什么不容易被摇树以及怎么用纯函数代替以优化体积-js教程-PHP中文网

tree shaking 对类的普通方法本身不失效，真正导致保留的是使用方式（如动态访问、instanceof）、副作用（如构造函数读 localstorage）及导出结构（如默认导出），而纯函数通过命名导出可实现精准剔除。

treeshaking中类的普通方法为什么不容易被摇树以及怎么用纯函数代替以优化体积

Tree Shaking 对类的普通方法（即定义在 class 内部的实例方法）本身并不直接“失效”，真正导致它们难以被剔除的，是类的使用方式、副作用干扰和导出结构问题，而非方法语法本身。关键在于：打包工具能否静态确认该方法从未被调用且无运行时影响。

类的方法为什么常被保留？

类定义本身不触发副作用，但类的使用常伴随隐式依赖
比如你写了：
```
// utils.js
export class NumberUtils {
  static clamp(value, min, max) { return Math.min(Math.max(value, min), max); }
  formatCurrency(n) { return `$${n.toFixed(2)}`; }
}
```
看似干净，但如果在别处写 new NumberUtils().formatCurrency(123)，或更隐蔽地——通过 instanceof、Object.getPrototypeOf、装饰器、反射（如 Reflect.getMetadata）等方式间接访问，打包工具就无法安全断定 formatCurrency 是死代码。

默认导出类 + 解构/动态访问会切断静态分析链

export default class Utils { ... } // ❌ 默认导出类
// 使用方：
import Utils from './utils';
const u = new Utils();
u.formatCurrency(); // 工具能识别 → 可摇
// 但若：
const method = 'formatCurrency';
u[method](); // ⚠️ 动态属性访问 → 工具保守保留全部方法

类中存在静态块、getter/setter 或顶层执行逻辑

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

export class ApiClient {
  constructor() { this.token = localStorage.getItem('token'); } // 读 localStorage → 副作用
  static init() { console.log('API ready'); } // 静态方法未调用，但类被引入就执行了构造函数
}

只要 ApiClient 被 import，整个类体就可能被执行，工具不敢删任何部分。

怎么用纯函数代替？实操建议

核心原则：把行为从“对象能力”转为“独立可识别的导出单元”，让每个函数具备清晰的输入输出、无隐式状态、无顶层副作用。

✅ 正确做法：拆成命名导出的纯函数

// utils/number.js
export function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

export function formatCurrency(n) {
  return `$${n.toFixed(2)}`;
}

// 使用方（精准引用）
import { clamp, formatCurrency } from './utils/number';
const safe = clamp(userInput, 0, 100);
const display = formatCurrency(total);

✅ Tree Shaking 可精确标记 clamp 是否被用，没用就整段函数体被剔除
✅ 不依赖 new、不触发构造逻辑、无 this 上下文污染
✅ 支持内联、压缩、甚至 Terser 的 /*#__PURE__*/ 标记进一步优化

✅ 进阶：组合与命名空间（保持可读性）

如果担心函数太多难管理，可用对象组织，但仍坚持具名导出：

// utils/number.js
export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
export const formatCurrency = (n) => `$${n.toFixed(2)}`;
export const isPositive = (n) => n > 0;

// 不要这样：
// export const number = { clamp, formatCurrency }; // ❌ 导出对象 → 摇树粒度变粗