Bundlephobia – 查 npm 包体积与下载耗时的依赖分析工具

Bundlephobia – 查 npm 包体积与下载耗时的依赖分析工具

Bundlephobia
Bundlephobia 是一个在线分析 npm 依赖体积与加载耗时、帮前端项目瘦身排雷的工具。
网站&在线应用

简介

Bundlephobia 解决的是「装完包、跑完构建才发现体积失控」这条回头路——把判断提前到安装之前,先看清一个 npm 包会给打包产物增加多少负担。它服务的是自己维护前端项目、不想为一个依赖牺牲首屏的人。

以 react 19.3.0 为例:这个包本身没有依赖,BUNDLE SIZE 同时给出 7.8 kB 的 MINIFIED 与 3 kB 的 MINIFIED + GZIPPED 两个口径,DOWNLOAD TIME 按假设网络分成 SLOW 3G 的 60 ms 与 EMERGING 4G 的 3 ms。首页搜索框下方还有 Scan a package.json file(beta),能把整份依赖清单一次扫完;包页下方的 Similar Packages 用倍数列出替代候选,一眼看出哪个包更重。

适用人群

自己维护前端项目、又不想为一个依赖牺牲首屏的人最合适:换包或升级依赖之前扫一遍,几秒就能判断这个依赖值不值得引,比事后跑打包分析省事。做体积预算或选依赖的人也可以拿它当统一口径,把「引包前先扫体积」固定成发布前的检查动作。反过来,只在打包之后做产物级分析的人不必用它——它给的是装包前的体积预判,不做打包产物的构成剖析。

优缺点

  • ✅ 免登录直接查:首页就是一个搜索框,输入包名回车即出版本、体积与下载耗时,不需要注册或登录。
  • ✅ 体积分两级口径:BUNDLE SIZE 同时给 MINIFIED 与 MINIFIED + GZIPPED,react 19.3.0 分别是 7.8 kB 与 3 kB,不用自己换算压缩率。
  • ✅ 下载耗时按网速分档:DOWNLOAD TIME 一路给 SLOW 3G 的 60 ms,一路给 EMERGING 4G 的 3 ms,可以直接对着用户的网络环境看。
  • ✅ 版本维度一眼看清:包页右侧按版本画柱状图,图例以 MIN 与 GZIP 两色区分,体积随版本往哪边走一眼就能看出来。
  • ❌ 导出分析有门槛:Exports Analysis 只对导出 ES Modules 且 side-effect free 的包开放,react 这类非 ESM 包看不到 export 级别的体积。
  • ❌ 数字是估算口径:下载耗时只是按 SLOW 3G 与 EMERGING 4G 两种假设网络给出的参考值,不等于真实用户的加载速度。

使用方法

  1. 免登录直接查:打开首页在搜索框输入包名(例如 react)回车,或点 Scan a package.json file 上传整份依赖清单一次扫完,全程没有注册或登录这一步。
  2. 先分清两个体积口径:MINIFIED(7.8 kB)是未压缩的调试体积,MINIFIED + GZIPPED(3 kB)才是用户实际要下载的量,再配合 DOWNLOAD TIME 的 SLOW 3G 与 EMERGING 4G 两档估用户要等多久。
  3. 把它固定成发布前的检查动作:换包或升级依赖之前先扫一遍,超标就换替代——包页 Similar Packages 会用倍数对照替代候选,要横向比多个候选包可以开 TRENDS 页并排看体积与下载量。
  4. 注意两点限制:导出分析只对 ESM 且无副作用的包开放,非 ESM 包看不到 export 级体积;下载耗时只是估算口径,别把它当成真实用户的加载速度写进性能结论。

收费说明

完全免费,也不需要注册。全站没有价目表、订阅入口或付费墙,搜包、看体积、翻历史版本(版控件从 19.1.6 排到 19.3.0)与扫描 package.json 都能直接做完,没有登录入口。唯一的商业入口是顶部导航里的 SPONSOR 赞助,项目署名 @pastelsky 并给出 STAR ON GITHUB,靠赞助与开源社区扩散;站内没有额度、商用授权或付费版的限制说明,长期拿它做依赖体检不产生任何成本。

平台支持

归类为网站与在线应用:整套工具跑在浏览器里,桌面浏览器与手机浏览器打开就能查,不需要安装客户端,也没有移动 App 与账号体系,因此不依赖第三方账号登录。国内可用性:官网可在国内直连打开,页面不加载墙外第三方脚本与 CDN。站内没有桌面端与离线包,批量需求用首页的 Scan a package.json file 解决,顶部另有 MCP 入口可把查询接进自己的工具链。


截图

Bundlephobia

相关链接


功能标签


特色

★
整份依赖清单扫描
首页搜索框下方提供 Scan a package.json file 入口(标注 beta),可以把项目里的 package.json 整份丢进去,一次看完所有直接依赖的体积。
★
多包趋势对比
Trends 页把多个包并排看,METRIC 可切 Downloads、Stars、Size,RANGE 有 2M、1Y、3Y 三档,用来观察长期的下载量、GitHub 星数与体积变化。
★
SNAPSHOT 对照表
Trends 页下方的 SNAPSHOT 表按 STARS、WEEKLY DOWNLOADS、GZIP、MINIFIED 四列排开参与对比的包,星数、周下载量与两种体积口径可以直接横向读。
★
相似包倍数标注
Similar Packages 不只列包名,还给出相对倍数与压缩体积,例如 react-native-gifted-charts 的压缩体积为 73.17 kB MIN + GZIP,倍数直接写在候选旁边,另留 SUGGEST ANOTHER 让人补充候选。
★
依赖状态标注
包页摘要行直接写出依赖状态,react 显示 no dependencies,一眼就能判断这个包会不会牵进一串传递依赖。
★
最近查询留痕
首页 Recent searches 区留着最近查过的包名,连 @spectrum-web-components/color-area 这种带 scope 的长名也在列,点回上一次的查询不用重新输入。

替代方案

■开发者工具
◆
JDoodle
JDoodle 是免装环境的在线编程环境,适合临时跑代码、教学布置与产品内嵌运行。
◆
OneCompiler
OneCompiler 是免安装、在浏览器里写代码跑程序的在线编译器,适合随时验证代码片段与语法。
◆
DevToys
DevToys 是给开发者在本机离线处理 JSON、Base64、JWT 等杂活的工具箱客户端。
◆
QuickType
QuickType 是把 JSON 样例转成强类型模型与序列化代码的生成器,适合省下接口类型的手写功夫。
◆
Shields
Shields 是给开源项目做状态徽章的开源服务,一条图片地址就能把构建、覆盖率等指标嵌进 README。
网站反馈表单
关注我们

公众号二维码

公众号

公众号二维码

小程序

反馈

网站无法访问了?向我们反馈!
点击下面的 反馈 按钮即可让我们知道!感谢!

为了阻止机器人发送垃圾信息,记得点击验证。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享