打造支持Tree-shaking的通用工具库技巧

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何打造支持Tree-shaking的通用工具库》，聊聊，希望可以帮助到正在努力赚钱的你。

答案是构建支持Tree-shaking的工具库需使用ES模块语法、合理组织代码结构并配置打包工具。具体包括：采用export单独导出函数，避免默认或聚合导出；每个函数独立文件存放，入口文件仅重新导出；通过Rollup或Vite生成ESM格式产物；在package.json中设置module字段指向ESM入口，并声明sideEffects以辅助摇树优化。

构建一个支持 Tree-shaking 的通用工具库，核心在于让打包工具（如 Webpack、Rollup）能静态分析模块结构，只打包实际用到的代码。实现这一点需要从模块格式、构建配置和代码组织方式上综合设计。

使用 ES 模块语法（ESM）

Tree-shaking 能生效的前提是模块必须使用 import / export 语法，而非 CommonJS 的 require / module.exports。

• 确保所有工具函数使用 export 单独导出，避免默认导出或对象聚合导出。
• 例如：每个工具函数单独导出，而不是集中在一个对象里导出。

推荐写法：

export function add(a, b) {
  return a + b;
}
<p>export function subtract(a, b) {
return a - b;
}
</p>

避免写法：

const utils = {
  add(a, b) { return a + b; },
  subtract(a, b) { return a - b; }
};
export default utils;

合理组织项目结构与入口文件

为了让 Tree-shaking 更高效，应采用“按需导入”友好的目录结构。

• 将每个工具函数放在独立文件中，如 src/add.js、src/subtract.js。
• 主入口文件（index.js）仅做重新导出，不聚合逻辑。

示例 src/index.js：

export { add } from './add';
export { subtract } from './subtract';

这样用户可以这样导入：

import { add } from 'your-utils'; // 只引入 add，其余可被摇掉

配置打包工具输出 ESM 格式

即使源码用了 ESM，最终发布到 npm 的包也需提供 ESM 构建产物。

• 生成一份 ESM 格式的构建文件，如 dist/your-utils.esm.js。
• 在 package.json 中通过 module 字段指向 ESM 入口：

{
  "main": "dist/your-utils.cjs.js",
  "module": "dist/your-utils.esm.js",
  "exports": {
    ".": {
      "import": "./dist/your-utils.esm.js",
      "require": "./dist/your-utils.cjs.js"
    }
  }
}

现代打包工具优先读取 module 或 exports.import，从而启用 Tree-shaking。

避免副作用（sideEffects）

某些代码会导致模块有“副作用”，使打包工具不敢摇掉未引用的代码。

• 避免在模块顶层执行可能产生副作用的操作，如修改全局对象、注册事件等。
• 若确实没有副作用，在 package.json 中声明：

"sideEffects": false

如果有部分文件有副作用（如样式注入），可列出文件路径：

"sideEffects": ["./dist/style.js"]

基本上就这些。只要坚持使用 ESM、合理拆分导出、提供标准构建产物，并正确配置 package.json，你的工具库就能天然支持 Tree-shaking，提升下游项目的构建效率。

以上就是《打造支持Tree-shaking的通用工具库技巧》的详细内容，更多关于工具库,Tree-shaking,打包工具,ES模块语法,package.json的资料请关注golang学习网公众号！