零基础构建支持Tree-Shaking的JS库

想要打造一款高性能、可优化的 JavaScript 库吗？本文将手把手教你从零开始构建一个支持 Tree-Shaking 的 JS 库，让你的代码更轻量、更高效。我们将深入探讨如何利用 ES6 模块语法，并结合 Rollup 或 Vite 等打包工具，生成 ESM 格式的模块，以便实现未引用代码的自动移除。同时，我们还会详细讲解如何在 `package.json` 文件中正确配置 `module` 字段和 `sideEffects` 属性，以及如何避免副作用，确保模块的纯净性。通过本教程，你将掌握构建现代 JS 库的关键技术，为你的项目带来更佳的性能和用户体验。

要构建支持 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';
</p>

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

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

rollup.config.js 示例：

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

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

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

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 = () => {};
</p>

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

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

好了，本文到此结束，带大家了解了《零基础构建支持Tree-Shaking的JS库》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！