如何构建一个支持Tree-shaking的JavaScript工具库?

胖枫酱_7282

胖枫酱_7282

2025-10-18

864人浏览

原创

要支持tree-shaking,需使用es模块语法、避免副作用、配置package.json的module和exports字段,并通过rollup等工具构建。

如何构建一个支持tree-shaking的javascript工具库?

要构建一个支持 Tree-shaking 的 JavaScript 工具库,核心是确保代码以 ES 模块(ESM)格式导出,并避免副作用。这样打包工具如 Webpack 或 Rollup 才能静态分析并剔除未使用的代码。

使用 ES 模块语法

Tree-shaking 依赖于静态导入/导出机制,因此必须使用 importexport 语法,不能使用 CommonJS(require/module.exports)。

错误示例:

不要这样写:

module.exports = { foo, bar };
正确做法:

应改为:

export const foo = () => { ... };
export const bar = () => { ... };

避免副作用

“副作用”指模块在导入时执行的逻辑,比如直接运行函数或修改全局对象。这类行为会让打包工具放弃摇树优化。

确保你的入口文件干净,只做导出操作。

Miller CSV TSV JSON 数据处理器
Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具,用于查询、整形和重新格式化名称索引数据,如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载
  • 不要在模块顶层执行可观察的副作用,例如: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。不复杂但容易忽略细节。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1935

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2542

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

896

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

2839

7

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

2023.11.27

1935

6

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

3696

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1175

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1518

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9143

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习