构建支持Tree-shaking的JavaScript库教程

今天golang学习网给大家带来了《构建支持Tree-shaking的JavaScript库指南》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

要支持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 };

应改为：

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库教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！