要支持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：指向 CommonJS 版本（用于 Node 兼容） module：指向 ES 模块版本（用于浏览器和 Tree-shaking） exports：推荐使用条件导出，更精确控制
示例：
{ "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。不复杂但容易忽略细节。
以上就是如何构建一个支持Tree-shaking的JavaScript工具库？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530540.html
微信扫一扫 
支付宝扫一扫 
