神器推荐：在浏览器分析 npm 包

大家好，我是若川。

我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 lxchuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北|河南籍前端群，可加我微信进群。公众号回复【相亲】关键词可以获取男生、女生的菜单~

今天跟大家推荐一个神器 pkg-size.dev，可以直接在浏览器对 npm 包进行分析（包括占用大小、打包大小、间接依赖项等等）。它的目标是让像我们可以更轻松地探索 npm 生态系统。
对于包的使用者，pkg-size 可以帮助你：

• 发现隐藏的依赖项并了解安装它们的原因。

• 了解正在安装的内容及其对 node_modules 大小的影响。

• 通过选择更小且优化的 ESM 包来优化 Web 应用程序性能。

• 比较和评估类似的软件包，最终确定最适合你的特定需求的软件包。

• 了解软件包背后的作者、开发人员。

对于包作者，pkg-size 可以帮助你：

• 评估安装瓶颈来提高速度，对于加载 npx 的 CLI 工具尤其重要。

• 即使在网速慢或存储空间低等不理想的条件下，也能确保无缝下载。

• 最大限度地减少依赖性以降低破坏性更改或恶意代码等风险。

这个网站可以完全在你的浏览器中运行，包括从安装 npm 包到打包它们的完整过程！
这个工具的核心是基于 WebContainers （StackBlitz 的一项技术，允许在浏览器中运行  Node.js ）构建的，可以运行 npm 并直接在浏览器中安装包。然后它会分析 node_modules 目录以深入了解已安装的软件包及其统计信息。

网站是纯静态的（不需要后端）托管在 Vercel 上。

我们尝试一下来安装一个 axios （浏览器的命令行可以显示一些安装细节）：

然后我们可以看到安装包占用的大小和细节，包括包本身占用的大小、各个子依赖项占用的大小（还包括简介信息、作者、是否支持 ESM、是否支持 CommonJS、是否支持类型等等）。

由于 npm 本身差劲的管理机制，即使是一个很小的包也会占用磁盘上的大量空间。经过这样的分析后，你可能会发现某些包包含不必要的代码并可能会影响应用程序的性能。如果你想最大限度地减少 node_modules 的空间消耗，推荐使用 pnpm。不仅可以重新获得大量磁盘空间，而且还可以实现巨大的 DX 改进！

然后你还可以看到关于打包大小的分析，包括导出了哪些子模块，这些模块分别占用了多少空间等等：

另外还包括包引入的一些运行时模块，它们会从大小计算中排除掉：

最后它也提供了可以给 npm 包作者分享出去的徽标，可以把占用大小可打包大小展示出来。

这个项目的灵感来自另外两个优秀的服务：Package Phobia 和 Bundlephobia。pkg-size 希望通过以下方式改善这些服务：

• 整合：将来自两个服务的能力结合在一个平台上，来进行更有凝聚力的分析。

• 依赖关系洞察：pkg-size 可以显示安装了什么以及为什么安装，为理解结果提供了有价值的信息，对于识别大型或重复的依赖关系非常有用，它还可以帮助开发者发现新的软件包。

• 最新数据：pkg-size 每次都会进行一次新的 npm 安装，获取最新的数据，甚至可以在嵌套的依赖项中展示更新。相比之下，Package Phobia 和 Bundlephobia隐藏了他们的结果。例如，在计算 express 的安装大小时，如果嵌套依赖项有一个小版本，它的大小增加了 100MB，这两个服务都不会反映大小的变化，因为 express 中没有版本碰撞。

• 对等依赖：pkg-size 允许在大小计算中包含对等依赖，认识到它们对于运行包也是必不可少的。

最后

参考：

• https://pkg-size.dev/axios

• https://github.com/privatenumber/pkg-size.dev

公众号：若川视野 回复【相亲】关键词可以获取男生、女生的菜单~