Bundlephobia

在安裝前查看 npm 套件的壓縮大小、下載時間與依賴組成。

  • 網頁工具
前往 Bundlephobia 官方網站

這是什麼

Bundlephobia 是 npm 套件的體積分析工具。輸入套件名稱後,頁面會顯示 minified 與 gzip 大小、預估下載時間、版本變化和依賴組成;符合條件的套件也會提供 exports 分析。

為何推薦

新增依賴前先看一次,可以快速發現體積明顯偏大的套件,或比較不同版本的變化。這比安裝後才從正式 bundle 追查問題省事。

適合誰

需要控制前端 JavaScript 傳輸量的工程師,以及維護 npm 套件的作者。

常用情境

  • 加入新套件前比較 minified 與 gzip 大小
  • 查看不同版本的體積趨勢和相依套件占比

使用提醒

頁面數字是 Bundlephobia 的建置結果,不等同於你的正式 bundle。實際大小仍會受到匯入方式、tree shaking、bundler 與建置設定影響,最後要用自己的產物確認。

SVGOMG

使用 SVGO 設定來最佳化 SVG 檔案的瀏覽器介面。

  • svg
  • optimization
  • web-performance

gltfpack

meshoptimizer 提供、用於最佳化 glTF 資產的命令列工具。

  • gltf
  • optimization
  • 3d-assets

CyberChef

在瀏覽器用 recipe 串接編碼、雜湊、壓縮與資料分析操作。

  • encoding
  • data-analysis
  • security