npm 套件大小查詢(bundle size)
查詢 npm 套件的 **minified / gzip 大小**、**相依數量**、**是否 tree-shakeable**。可加入多個套件並排比較(綠色長條反映 gzip 體積)。前端選 dep、評估 bundle 影響時最常用。資料來自 bundlephobia.com 公開 API。
熱門套件
輸入套件名稱開始查詢,或選下方熱門套件。
›如何使用
- 輸入 npm 套件名稱(
react、lodash、@vercel/analytics),也可指定版本(react@19.2.4)。 - 按 查詢 或從下方 熱門套件 chip 直接點。多次查詢會堆疊在下方,可並排比較。
- 每筆結果顯示:Min(minified)、Gzip(實際傳輸大小,綠字)、Deps(相依套件數)、Side effects(可 tree-shake 的會顯示綠色)。
- 綠色長條反映 gzip 體積(以目前清單中最大者為 100%),一眼看出哪個套件比較肥。
- 點套件名連到 bundlephobia.com 詳細頁面;按 ✕ 移除一筆。
Tips
- Gzip 大小 才是真正用戶下載的量(比 minified 通常少 60-80%)。
lodash全包 25KB gzip,但lodash-es可 tree-shake 到只剩你用的那幾個函式。 - Side effects = false 表示套件標示為「無副作用」,bundler 可 tree-shake 掉沒用到的 exports。
react、lodash都是 yes。 - date-fns vs dayjs vs moment:這三個對比是經典 — moment 200KB gzip(別用)、dayjs 2KB、date-fns ~12KB 但可 tree-shake。
- 注意 deps 數:相依越多,你的 lockfile 越長、CI install 越慢、CVE 風險越大。
- 對標 bundlephobia.com:他們是來源,我們把多套件並排比較做得更順手,適合做 dep 評估會議。
💡 本工具會發 fetch 到 bundlephobia.com 公開 API(這部分不是純本地)。套件名稱會傳給 bundlephobia,但這對開源套件名來說不算敏感資訊。