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

Bundlephobia

Bundlephobia 是一个在线查 npm 包体积与下载耗时的工具。

网站&在线应用

简介

Bundlephobia 的首页只有一行搜索框，标题原文写着 find the cost of adding a npm package to your bundle，输入包名回车就能拿到体积报告；框下方另有一行 OR 与 Scan a package.json file（标注 beta），可以把整份依赖清单一起扫。再往下是 Recent searches，列出最近查过的 @pie-lib/pie-toolbox-math-rendering-module、@spectrum-web-components/color-area、atm_currency_converter48、coding-project7-student-management-by-arjumand、slidev-check 等包名；首页底部是 What does Bundlephobia do? 自我说明，大意是 JS 包越堆越多、站点越做越大，它让你在 npm install 之前就知道新包会给打包产物带来多少负担，并分析 size、compositions 与 exports，末尾注明名字来自 @thekitze、站点托管在 DigitalOcean，另给 STAR ON GITHUB 入口。

包页的信息更密。抓取时打开的是 react，版本 19.3.0，摘要写着 React is a JavaScript library for building user interfaces，依赖状态标为 no dependencies。BUNDLE SIZE 一栏并排两个数字：MINIFIED 7.8 kB、MINIFIED + GZIPPED 3 kB；DOWNLOAD TIME 按网速假设分两档，SLOW 3G 估出 60 ms、EMERGING 4G 估出 3 ms。右侧是按版本画的柱状图，图例用 MIN 与 GZIP 两种颜色区分，顶部版本控件从 19.1.6 一路排到 19.3.0。页面往下是 Exports Analysis 与 Similar Packages：前者说明导出分析只对导出 ES Modules 且无副作用的包开放，react 当场提示 This package does not export ES6 modules.；后者拿 react-native-gifted-charts 与它对照，标出 24.2 × LARGER 与 72.23 kB MIN + GZIP，旁边留了 SUGGEST ANOTHER 让人补充候选。

站内的 Trends 页（Package trends）把多个包并排看：填入 react 与 vue 之后，METRIC 可切 Downloads、Stars、Size，RANGE 有 2M、1Y、3Y 三档，COMPARE WITH 里能一键再加 preact、svelte、solid-js、@angular/core、lit 等候选；下方 SNAPSHOT 表按 PACKAGE、STARS、WEEKLY DOWNLOADS、GZIP、MINIFIED 五列排开，react 一行为 250.8 k、138.83 M、3 kB、7.8 kB，vue 一行是 54.5 k、11.96 M、88.8 kB、245.1 kB。顶部导航并列 BADGES、SPONSOR、BLOG、TRENDS、SCAN PACKAGE.JSON 与 MCP 六个入口，右上角另有两个图标按钮，一个是 GitHub，一个是深色模式切换。

✨ 优缺点

✅ 免登录直接查：首页就是一个搜索框，输入包名回车即出版本、体积与下载耗时，抓取到的页面上看不到注册或登录入口。
✅ 体积分两级口径：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 当场提示 This package does not export ES6 modules.，非 ESM 包就看不到 export 级别的体积。
❌ 数字是估算口径：下载耗时只是按 SLOW 3G 与 EMERGING 4G 两种假设网络给出的参考值，不等于真实用户的加载速度。

📖 使用方法

打开首页，在搜索框输入 npm 包名（例如 react），回车或点右侧的放大镜。
先看 BUNDLE SIZE 的 MINIFIED 与 MINIFIED + GZIPPED 两个数字，再用 DOWNLOAD TIME 的 SLOW 3G 与 EMERGING 4G 两档估一下用户要等多久。
要翻历史版本就在顶部版本控件里选 19.1.6 这类旧版，从 19.1.6 到 19.3.0 可逐版查看；想一次看完整项目，点 Scan a package.json file 上传依赖清单。
要横向比包就开 Trends 页，用 METRIC 切 Downloads、Stars、Size，RANGE 选 2M 或 1Y，再从 COMPARE WITH 里加 preact、svelte 等；想找替代方案就看 Similar Packages 的倍数并点 SUGGEST ANOTHER 补充。