主流 nodejs 包管理器 pnpm vs bun vs npm vs yarn 简单横评
pnpm还真是会玩空间魔术?单项目里它领先优势就这么点?Node.js 20把npm喂肥了,现在谁还敢说npm是废物?这测试结果真是让人摸不着头脑。
目录9 个章节
前端
我最近一直在写前端项目,使用的环境也从原本的 Node.js 切换到 bun,感受到了飞一般的体验。
今天要维护一下 StarBlog Vue Admin 项目时,又得安装一次依赖,于是突发奇想,想要看看不同包管理器的空间占用如何,所以有了这篇文章的测试。
本文着重测试 node_modules 的空间占用情况
测试环境
-
操作系统: Windows10 22H2 10.0.19045
-
测试项目: StarBlog Vue Admin
-
Node.js环境: v20.18.1
这是一个 Vue2 的管理后台项目,可以很好代表一些旧前端项目。
使用的分析空间命令是:
"{0:N2} MB" -f ((Get-ChildItem -Recurse -Force .\node_modules | Measure-Object -Property Length -Sum).Sum / 1MB)
测试结果
| 包管理器 | node_modules 占用空间 |
|---|---|
| pnpm | 🏆 205.36 MB (最省) |
| npm | 209.02 MB |
| yarn | 213.42 MB |
| bun | 234.13 MB (最占) |
测试下来,令我比较惊讶的是,曾几何时还是人人嫌弃的 npm 现在已经这么好了,无论是速度还是空间占用,都有不错的竞争力👍,看来我真的太久没用 npm 了😂(大人,时代变了😄
PS: 对了,这里面
pnpm dev无法正常启动项目,有一堆报错,推测是版本不兼容,降级 node 版本或许能解决了,但我懒得折腾了。🥱
小结
- pnpm 的“硬链接 + 全局 store”机制果然在空间占用上最强,符合预期。
- npm / yarn 在单项目下差异不大,空间表现接近。
- bun 虽然在速度上通常领先,但在这个测试里,反而是最占磁盘的 —— 这也说明了它目前在“去重/节省空间”上的优化还不如 pnpm,甚至不如 npm。
分析
项目依赖结构的影响
- Vue2 项目依赖相对固定,包体量不会像 Vue3 + Vite 那种动辄几百上千小包的组合。
- 在这种情况下,npm 的冗余问题不明显,所以它和 yarn / pnpm / bun 在空间占用上差距很小(200 MB 左右,都在同一量级)。
- pnpm 的硬链接优化,在“依赖重复多的场景”才能拉开更大差距(比如 monorepo、多项目复用依赖时)。单一项目时,优势就被“压缩”了。
Node.js 20 的改进
- 从 Node.js 16 开始,npm 默认版本已经是 npm 8+ / 9+,它的性能和磁盘效率都提升了不少。
- 以前大家吐槽 npm 慢、空间大,是 npm 6/7 时代的体验。现在 npm 在单项目场景下其实完全不“拉胯”。
- 这就是为什么我会觉得:“npm 并没有传说中那么慢,占用空间也不算大”。
安装速度 vs 空间占用
- bun:安装速度快是它的绝对优势,但空间优化机制不如 pnpm,所以磁盘占用最高。
- pnpm:安装速度快,空间省,但在“单项目”里领先不大,要多个项目共享依赖时才能完全发挥。
- npm:在 Node.js 20 的优化下,速度已经不算慢,空间占用也优化过,和 yarn 处于一个水平。
- yarn (classic):相比 npm 没太大优势了,现在更多人转向 yarn berry(v2+),但那一套对 Vue2 老项目可能兼容性堪忧。
结论
- 单项目场景:npm/yarn/pnpm/bun 差异其实很小,选谁都够用。
- 多项目 / monorepo 场景:pnpm 的空间优势会爆炸性放大,npm/yarn/bun 会逐渐膨胀。
- 极限速度需求:bun 是最快的,但代价是占用更大。
_EOF_
主流 nodejs 包管理器 pnpm vs bun vs npm vs yarn 简单横评
- 本文作者:
- 程序设计实验室
- 版权声明:
- 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
相关文章
返璞归真!使用 Alpine.js 开发交互式 web 应用,抛弃 node_modules 和 webpack 吧!
前端框架层出不穷,项目越做越大,alpine.js 和 htmx 这种库是反其道而行,可以用最简单的方法来开发现代化的 web 应用。
2024-11-21 · Web前端 · 约 1 分钟
使用JS模拟按键输入的踩坑记录
坑 一开始在Google搜索了一番,找到了用jQuery的方案,代码量很少,看起来很美好很不错,结果,根本没用…… 我反复试了这几个版本: var e = $.Event('keyup') e.keyCode = 49 $('#btn').trigger(e) // 就是把 keycode 换成 which $('#btn').trigger($.Event('keyup', { which: 4
2021-12-18 · Web前端 · 约 1 分钟
在网页中使用Material-Design图标
什么是Material Design图标 MD大家都听过的吧,就是谷歌的Material Design设计,Material Design图标就是符合 MD设计语言的图标。 本文通过字体的方法在网页中显示Material Design图标。 What are material icons Material design system icons are simple, modern, friend
2021-12-18 · Web前端 · 约 1 分钟
NextJs 与 Tailwind 入门开发笔记
Next.js?React的脚手架罢了,开箱即用,拒绝精神内耗。Tailwind?Bootstrap的替代品,罢了。实际开发中,pnym坑死人,localStorage问题?小菜一碟。
2024-01-27 · Web前端 · 约 1 分钟
讨论
共 0 条加载评论中…