要构建支持 Tree-Shaking 的 JavaScript 库，需使用 ES6 模块语法，配置打包工具输出 ESM 格式，external 依赖，并在 package.json 中设置 module 字段指向 ES 模块，同时声明 sideEffects: false 以标识无副作用，确保模块纯净、不执行顶层副作用，从而让未使用代码可被安全移除。
要构建一个支持 Tree-Shaking 的 JavaScript 库，核心是使用 ES6 模块语法（import/export），并确保打包工具能识别未使用的代码。Tree-Shaking 依赖于静态结构的模块系统，因此从设计到打包每个环节都要遵循规范。
1. 使用 ES6 模块语法导出功能
Tree-Shaking 能生效的前提是模块必须采用静态 export 和 import。避免使用动态或默认混合导出方式，推荐按名称导出每一个函数或类。
每个功能单独导出，便于按需引入避免在入口文件中执行副作用操作
示例：
// utils/math.jsexport const add = (a, b) => a + b;export const subtract = (a, b) => a - b;// index.jsexport { add } from './utils/math';export { formatPrice } from './utils/string';
2. 配置打包工具（如 Rollup 或 Vite）
Rollup 原生支持 Tree-Shaking，是构建库的首选工具。配置时生成 ESM（ES Module）格式输出，保留模块结构。
立即学习“Java免费学习笔记（深入）”；
输出格式设为 ‘es’ 或 ‘esm’不将依赖打包进最终产物（external dependencies）
rollup.config.js 示例：
export default { input: 'src/index.js', output: { dir: 'dist', format: 'es' }, external: ['lodash'] // 外部化第三方依赖};
3. 在 package.json 中声明模块入口
通过 module 字段告诉打包工具你的库提供了支持 Tree-Shaking 的 ES 模块版本。
main：指向 CommonJS 版本（兼容旧环境）module：指向 ES 模块版本（用于现代构建工具）
package.json 示例：
{ "main": "dist/index.cjs", "module": "dist/index.js", "sideEffects": false}
注意：sideEffects: false 表示整个库无副作用，允许构建工具安全地移除未引用的导出。如果有样式或监听等副作用，需明确列出相关文件。
4. 避免副作用，保持模块纯净
如果模块在导入时执行了全局操作（如修改原型、绑定事件、直接执行函数），Tree-Shaking 可能失效。
不要在模块顶层执行可观察的副作用将副作用逻辑封装在函数内，由用户显式调用
错误示例：
// bad.jsconsole.log('Library loaded'); // 副作用window.addEventListener('error', handler);export const foo = () => {};
正确做法：将这些操作放在函数中暴露给用户。
基本上就这些。只要保证模块结构清晰、使用 ES 导出、正确配置打包和 package.json，你的库就能被消费它的项目有效 Tree-Shake。
以上就是如何从零开始构建一个支持 Tree-Shaking 的 JavaScript 库？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/30522.html
微信扫一扫 
支付宝扫一扫 
