包恐惧症
- ⚖️ 查找向项目添加新依赖的成本
- 🕗 使用此 Web 应用节省时间和磁盘空间
- 📈 通过图表检测 JavaScript 体积随时间的膨胀
- 🛡️ 为您的 README 获取徽章/盾牌
- 📡 从 JSON API 获取体积,以便集成到任何工具中
...如 AWS Developer Tools Blog 和 npm weekly 和 ponyfoo weekly 和 habr 和 rwpod 和 wolf report 和 the changelog 以及 Twitter 上随处可见
目的是什么?
Package Phobia 在 安装 npm 包之前报告其体积,并记录体积随时间的变化。
这对于检查潜在的 dependencies 或 devDependencies 非常有用,而无需占用宝贵的磁盘空间或等待数分钟进行 npm install。没人有时间做这些。
结果会被保存,因此第一个人可能需要稍等片刻才能查看包体积,但其他人可以立即看到结果!
演示
一个很好的用例可能是比较测试运行器、Web 框架,甚至是打包器。点击下面的链接之一,查看 Package Phobia 的实际效果!
- 测试框架:tap 与 tape
- Web 框架:express 与 micro
- JavaScript 打包器:webpack 与 rollup
- 任务运行器:grunt 与 gulp
- HTTP 请求:request 与 node-fetch
- Glob 模式:glob 与 tiny-glob
- 参数解析:yargs 与 arg
- 站点生成器:gatsby 与 next
- 类型检查器:typescript 与 flow-bin
- 代码检查器:eslint 与 jslint
- 颜色格式化器:chalk 与 picocolors
- 命令行界面:@angular/cli 与 @babel/cli
- 桌面框架:nw 与 electron
- 无头浏览器:puppeteer 与 chrome-aws-lambda
- 包管理器:npm 与 yarn
API
如果您希望在项目中使用 Package Phobia API,请创建一个 PR 来修改 API Users。
有关更多使用详情,请参阅 API.md。
先例
Package Phobia 受到 Bundle Phobia 和 Cost Of Modules 的启发。
这有何不同?
-
Package Phobia THIS TOOL 报告包随时间变化的安装大小的 web 应用。
-
Bundle Phobia 报告包经 webpack 打包后随时间变化的大小的 web 应用。
-
Bundle.js 报告自定义代码片段经 esbuild 打包后大小的 web 应用。
-
Pkg-Size 报告一个或多个包经 esbuild 打包后大小的 web 应用。
-
Cost Of Modules 报告当前已安装包大小的 cli。
-
Badge Size 以 svg 形式报告包中单个文件 gzip 大小的徽章服务。
-
Size Limit 如果应用打包后(或未打包)的大小过大则失败的 cli。
-
Bundle Size 如果文件大小过大则使 CI 失败的 cli。
-
Package Size 比较多个包打包大小的 cli。
-
npm Size 比较多个包 npm 安装大小的 cli。
-
Require So Slow 跟踪 node.js 应用中每个
require模块耗时的 cli。 -
Why Bundled? 使用 webpack stats 显示导入数量和包大小的 cli。
-
Do you even lift? - 报告包经 rollup 打包后大小的 cli,由 npm 团队提供。
-
Import Cost 在编辑器中内联显示包大小的扩展(及 cli)。
-
npm Download Size 报告包下载大小(网络流量)的 web 应用。
-
npm Download Size cli 报告包下载大小(网络流量)的 cli。
-
Build Size - 一个 GitHub 应用,会在 PR 上评论你的构建产物大小
-
Pkg Size - 一个 Web 应用,显示包大小和文件数量随时间的变化(仅静态数据)
-
BundleWatch - 一个 CLI,用于检查你的 bundle 是否超过特定大小,并跟踪其增长
-
PackWatch - 一个 CLI,用于检查你的包 tarball 是否超过特定大小,并跟踪其增长
为什么大小与磁盘上的大小不同?
你是否安装了一个包,并将磁盘上的大小与 Package Phobia 报告的大小进行了比较?
这个数字很可能不同,因为 Package Phobia 不了解你的硬盘,因此无法预测块是如何分配的。
已知包中包含许多小的 .js 文件,这些文件实际上可能会占用大量磁盘空间,比一个大的连续文件占用的空间更多。
请参阅 此问题 以获取更多详细信息。
长期目标是什么?
理想情况下,这些信息可以列在 npmjs.com、npms.io 或 bundlephobia.com 上。
以下是每个网站的相关功能请求。
- bundlephobia.com 的 GitHub issue
- npmjs.com 的 GitHub issue
- npms.io 的 GitHub issue
- staticgen.com 的 GitHub issue
- cost-of-modules 的 GitHub issue
- npm-cli 的 GitHub issue
- bundlesize 的 GitHub issue
- npmgraph.an 的 GitHub issue
希望这能促使发布者注意到他们臃肿的包,例如以下情况:
- micro 并非微型
- ava 并非极简
- typescript 自 v2.0.0 以来体积翻倍
- bundlesize 自 v0.14.0 以来 npm install 后体积增大 10 倍
- jquery@3.3.0 意外增加了 300 个依赖项
- socket.io 体积缩小 6 倍
- serve@7.0.0 体积缩小 3 倍
- webpack-cli@3.0.0 体积缩小 4 倍
- v8n@1.1.1 体积缩小 11 倍
- now@13.0.0-canary.6 体积缩小 2 倍
- typescript@5.0.0-beta 体积缩小 41%
媒体中的 npm 依赖
我并非第一个注意到 npm 包正滚雪球般变成臃肿的依赖项中依赖项的人。
以下是其他一些用户,他们以幽默的方式指出了这种 JS 膨胀现象。
| thomasfuchs | ben_a_adams | devrant | turnoff.us | styfle | davej | FredyC | tomitrescak | maybekatz | hichaelmart | brad_frost | Bryan_Chapel | getabitlit | iamdevloper | rickhanlonii |
贡献
在开始编写任何代码之前,请参阅 CONTRIBUTING.md 和 CODE_OF_CONDUCT.md
赞助商
- 网络托管由 vercel.com 赞助
- 数据库由 upstash.com 赞助
作者
由 styfle 开发
