如何从零开始构建一个支持 Tree-Shaking 的 JavaScript 库？

要构建支持 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.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
<p>// index.js
export { add } from './utils/math';
export { formatPrice } from './utils/string';

2. 配置打包工具（如 Rollup 或 Vite）

Rollup 原生支持 Tree-Shaking，是构建库的首选工具。配置时生成 ESM（ES Module）格式输出，保留模块结构。

立即学习“Java免费学习笔记（深入）”；

rollup.config.js 示例：

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  external: ['lodash'] // 外部化第三方依赖
};

3. 在 package.json 中声明模块入口

通过 module 字段告诉打包工具你的库提供了支持 Tree-Shaking 的 ES 模块版本。

零一万物开放平台

零一万物大模型开放平台

0

查看详情

package.json 示例：

{
  "main": "dist/index.cjs",
  "module": "dist/index.js",
  "sideEffects": false
}

注意：sideEffects: false 表示整个库无副作用，允许构建工具安全地移除未引用的导出。如果有样式或监听等副作用，需明确列出相关文件。

4. 避免副作用，保持模块纯净

如果模块在导入时执行了全局操作（如修改原型、绑定事件、直接执行函数），Tree-Shaking 可能失效。

错误示例：

// bad.js
console.log('Library loaded'); // 副作用
window.addEventListener('error', handler);
<p>export const foo = () => {};

正确做法：将这些操作放在函数中暴露给用户。

基本上就这些。只要保证模块结构清晰、使用 ES 导出、正确配置打包和 package.json，你的库就能被消费它的项目有效 Tree-Shake。

以上就是如何从零开始构建一个支持 Tree-Shaking 的 JavaScript 库？的详细内容，更多请关注php中文网其它相关文章！