JavaScript 中 Tree Shaking 怎么在纯函数编写中标记 /*#**PURE***/ 协助打包工具裁剪-js教程-PHP中文网

tree shaking 生效需 es 模块且静态可分析；/*#__pure__*/ 注释用于标记无副作用的函数调用，使打包工具在返回值未被使用时安全移除该调用。

javascript 中 tree shaking 怎么在纯函数编写中标记 /*#**pure***/ 协助打包工具裁剪

Tree Shaking 能生效的前提是：代码必须是 ES 模块（import/export），且导出/调用关系可静态分析。而 /*#__PURE__*/ 注释（注意是两个下划线，不是三个星号）是给打包工具（如 Webpack、Rollup、esbuild）的提示，告诉它：**这个函数调用没有副作用，如果返回值未被使用，可以安全移除**。

什么时候需要手动加 /#PURE/

纯函数本身不等于“会被摇掉”——Tree Shaking 摇的是“未引用的导出”，不是“未使用的调用”。但当一个纯函数被调用，而它的返回值完全没被使用时，打包工具无法确定这次调用是否真没副作用（比如是否偷偷改了全局状态、触发了 console、发了请求等）。这时就需要你显式声明它是纯的：

调用了一个无副作用的工具函数，但只为了其执行过程中的中间效果（比如初始化某个内部缓存），并不关心返回值
调用了高阶函数（如 memoize、once）或创建对象/函数的工厂函数，但只取其返回的新函数，原始调用本身可被省略（如果没其他引用）
某些 polyfill 或启动逻辑写在模块顶层，但实际只依赖其副作用（如向 Array.prototype 添加方法），而函数本身返回值无用

怎么正确写 /#PURE/ 注释

注释必须紧挨着函数调用前，且只能用于**调用表达式**（不能放在函数声明/定义上）：

// ✅ 正确：标注一次调用
const result = /*#__PURE__*/ computeExpensiveValue();
<p>// ✅ 正确：标注立即执行函数
const utils = /<em>#<strong>PURE</strong></em>/ (() => ({ add: (a, b) => a + b }))();</p><p>// ❌ 错误：写在函数声明上（无效）
/<em>#<strong>PURE</strong></em>/
function helper() { return 42; }</p><p>// ❌ 错误：漏了空格或符号不匹配（必须是 /<em>#<strong>PURE</strong></em>/，两个下划线）
/<em>#PURE#</em>/ doSomething();
</p>

配合纯函数编写的实践建议

光加注释不够，函数本身得真是纯的，否则会引发运行时错误（比如摇掉了一个看似纯、实则发请求的初始化调用）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

确保被标注的函数不读写外部可变状态（如全局变量、DOM、localStorage）、不调用非纯函数（如 Date.now()、Math.random()、fetch）
避免在模块顶层直接调用——把初始化逻辑封装进函数，再用 /*#__PURE__*/ 标注调用，方便 Tree Shaking 判断是否保留
导出纯函数时，尽量用命名导出（export function foo() {...}）而非默认导出（export default () => {...}），后者在某些工具链中可能影响内联与摇树精度
在 Rollup 或 esbuild 中，开启 treeshake.moduleSideEffects: false（或为具体模块设 sideEffects: false）能进一步辅助裁剪

一个真实小例子

假设你有一个工具库 math.js：

// math.js
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
<p>// 这个函数只用于注册内部缓存策略，返回值从不使用
export function initCache() {
cacheStrategy = 'lru';
return null;
}
</p>

在入口文件中：

import { initCache } from './math.js';
<p>// 即使 initCache 没被其他地方 import，这里调用它只是为了副作用
// 但打包工具不知道它没副作用 —— 所以我们明确告诉它：这个调用可被忽略（如果没其他引用）
/<em>#<strong>PURE</strong></em>/ initCache();</p><p>console.log('app started');
</p>

此时若整个项目都没用到 math.js 的其他导出，且 initCache 的调用被标记为 pure，那么 Webpack/Rollup 在生产构建中就可能把整个 math.js 模块完全剔除（包括 initCache 定义本身）。