要支持Tree-shaking，需使用ES模块语法、避免副作用、配置package.json的module和exports字段，并通过Rollup等工具构建。
要构建一个支持 Tree-shaking 的 JavaScript 工具库，核心是确保代码以 ES 模块（ESM）格式导出，并避免副作用。这样打包工具如 Webpack 或 Rollup 才能静态分析并剔除未使用的代码。
使用 ES 模块语法
Tree-shaking 依赖于静态导入/导出机制，因此必须使用 import 和 export 语法，不能使用 CommonJS（require/module.exports）。
错误示例：不要这样写：
module.exports = { foo, bar };
正确做法：
应改为：
立即学习“Java免费学习笔记（深入）”；
export const foo = () => { ... };
export const bar = () => { ... };
避免副作用
“副作用”指模块在导入时执行的逻辑，比如直接运行函数或修改全局对象。这类行为会让打包工具放弃摇树优化。
确保你的入口文件干净，只做导出操作。
- 不要在模块顶层执行可观察的副作用，例如：
console.log('init')或globalThis.plugin = fn - 如果必须设置副作用，在 package.json 中明确声明，或将其封装成函数由用户调用
配置 package.json 支持 ESM
通过字段告诉打包工具哪些文件支持 Tree-shaking。
示例：
{
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"exports": {
".": {
"import": "./dist/index.esm.js",
"require": "./dist/index.cjs.js"
}
}
}
使用 Rollup 或 Webpack 打包
选择支持 Tree-shaking 的构建工具。Rollup 是构建工具库的常用选择，天生对库优化友好。
Rollup 配置要点：
- 输出格式设为
es（即 ES 模块） - 将第三方依赖设为 external，避免被打包进去
- 启用
treeshake: true（默认开启）
示例 rollup.config.js：
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.esm.js',
format: 'es'
},
external: ['lodash'] // 外部化依赖
};
基本上就这些。只要保证使用 ESM、无副作用、正确配置 package.json，并通过现代工具链构建，你的工具库就能被下游项目有效 Tree-shaking。不复杂但容易忽略细节。
