今天跟大家推荐一个神器 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
允许在大小计算中包含对等依赖,认识到它们对于运行包也是必不可少的。参考: