如何构建一个支持Tree Shaking的通用工具库？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-08

浏览次数：次

返回列表

要构建支持 Tree Shaking 的工具库，需使用 ESM 语法、避免副作用、合理配置打包格式。核心是采用静态 import/export，每个函数单独文件导出，入口文件重新导出；在 package.json 中设置 "sideEffects": false（若有真实副作用则列出）；通过 Rollup 输出 esm 和 cjs 格式；最后验证未引用函数是否被移除。

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

要构建一个支持 Tree Shaking 的通用工具库，核心是确保未使用的代码在打包时能被静态分析工具（如 Webpack、Rollup 或 Vite）识别并移除。这要求你在项目结构、模块导出方式和打包配置上遵循特定规范。

使用 ES 模块语法

Tree Shaking 依赖于静态的 import / export 语法，因此必须使用 ES6 模块（ESM），而不是 CommonJS（require / module.exports）。

注意：如果混用 require 或动态导入，打包工具无法进行静态分析，Tree Shaking 将失效。

每个工具函数单独定义在一个文件中
使用 export 导出具体函数，避免默认导出或命名空间导出
入口文件使用命名导出重新导出所有功能

示例：

// src/utils/format.js
export function formatDate(date) { /* ... */ }
<p>export function formatNumber(num) { /<em> ... </em>/ }</p><p>// src/index.js
export <em> from './utils/format';
export </em> from './utils/validate';

避免副作用

“副作用”指模块执行时除了导出值之外还产生其他行为（如修改全局变量、执行 console.log 等）。打包工具若检测到副作用，默认不会删除该模块，即使其中部分函数未被引用。

在 package.json 中声明 "sideEffects": false，告诉打包工具整个库无副作用，可安全进行 Tree Shaking。

{
  "name": "my-utils",
  "main": "dist/my-utils.cjs",
  "module": "dist/my-utils.esm.js",
  "sideEffects": false
}

如果你的库包含 CSS 引入或 polyfill 等真实副作用，应将它们列在 sideEffects 数组中
例如："sideEffects": ["./src/polyfill.js", "*.css"]

合理设计打包输出格式

为了兼容不同环境，建议同时输出多种模块格式：

Android创建和使用数据库详细指南中文WORD版

每个应用程序都要使用数据，Android应用程序也不例外，Android使用开源的、与操作系统无关的SQL数据库--SQLite，本文介绍的就是如何为你的Android应用程序创建和操作SQLite数据库。数据库支持每个应用程序无论大小的生命线，除非你的应用程序只处理简单的数据，那么就需要一个数据库系统存储你的结构化数据，Android使用SQLite数据库，它是一个开源的、支持多操作系统的SQL数据库，在许多领域广泛使用，如Mozilla FireFox就是使用SQLite来存储配置数据的，iPhon

0 查看详情 Android创建和使用数据库详细指南中文WORD版

ESM（.esm.js）：保留 import/export，供支持 Tree Shaking 的现代打包工具使用
CommonJS（.cjs）：供 Node.js 或旧版构建工具使用
可选：UMD 格式用于浏览器直接引入

推荐使用 Rollup 或 Vite 打包，天然对 Tree Shaking 友好。

Rollup 配置示例（rollup.config.js）：

export default [
  {
    input: 'src/index.js',
    output: {
      file: 'dist/my-utils.esm.js',
      format: 'esm'
    }
  },
  {
    input: 'src/index.js',
    output: {
      file: 'dist/my-utils.cjs',
      format: 'cjs'
    }
  }
]