如何构建一个支持Tree-shaking的通用工具库？-js教程-PHP中文网

如何构建一个支持Tree-shaking的通用工具库？

狼影

发布： 2025-09-29 15:07:16

原创

205人浏览过

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

如何构建一个支持tree-shaking的通用工具库？

构建一个支持 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;
}

登录后复制

避免写法：

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';

登录后复制

这样用户可以这样导入：

LuckyCola工具库

LuckyCola工具库是您工作学习的智能助手，提供一系列AI驱动的工具，旨在为您的生活带来便利与高效。

查看详情

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

登录后复制

配置打包工具输出 ESM 格式

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

建议使用 Rollup 或 Vite 构建：

生成一份 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。