npm、yarn、pnpm的对比和优略

前言

作为十多年的前端老前辈,我们从node产生之初,就接触到node包的管理工具,从开始的npm、到yarn、再到现在的pnpm,这个阶段到底经历了什么?

想要搞明白这个问题,我们就要理解,node包管理的发展历程。

我们的node包管理发展过程

1、npm最初的node包管理阶段

node刚出生的时候,npm作为node包的管理工具,它还处于一个初级阶段。

它有一些特征:

  • 安装包是串行下载,也就是我们的项目中,一个一个的下载依赖包,速度很慢。
  • 在网络不稳定的情况下,下载失败需要重新下载安装
  • 缓存机制很差劲,经常下载重复的包。
  • 包的依赖,是层层嵌套,同样的依赖,在不同的包需要下载多遍。

总结一下,就是下载速度慢,缓存机制也不行,依赖关系就是简单的嵌套机制。

2、yarn的改进

npm作为最初的包管理方案,正是因为它差劲的表现,导致了需要一款工具,针对它进行改进,这个时候,yarn就诞生了。

yarn做了这样的一些优化:

  • yarn 并行下载依赖包,显著提升安装速度。
  • yarn 的包下载,支持断点续传,失败后可以从断点继续。
  • yarn 做了更智能的本地缓存,避免重复下载
  • yarn 的下载体验,在离线情况下,做了更好的优化
  • yarn 使用扁平化的依赖包管理方案,对比嵌套结构,是一种更优策略

正是这些体验的优化,让yarn迅速在前端里面火热起来。

后续,其实npm自身,也有优化改进的一个过程。分别在其后续的版本中,做了很多优化。包括:

1、把串行下载依赖包改为并行下载。

2、做了多次的缓存优化机制。

3、针对依赖解析,重写,大幅优化解析性能

4、增加了自身workspace等能力。

其实,在npm持续优化的过程中,性能上,其实已经慢慢追上了yarn的包管理方案。

3、pnpm的创新

但是,node包管理的方案,这就到头了吗?其实不然,pnpm又在这之上,做了创新性的改善,个人预计,后续的所有前端项目,都会抛弃npm、yarn,转向使用pnpm。

那pnpm做了哪些创新呢?

  1. 大幅优化磁盘空间,所有的依赖包,只需要在全局存一份。(有经验的前端小伙伴就知道,前端项目多了,光依赖包,我们可能下了有几百个G)
  2. 极致的安装速度。(使用链接的方式,而不是把包重新复制/下载)
  3. 具有一个全局存储池,存放已经下载的依赖包。通过链接方式,访问这些包。这就是pnpm的核心优势。

总结对比

特性 npm yarn pnpm
安装速度 中等 最快
磁盘使用 中等 最低
依赖隔离 中等 最强
缓存效率 中等 最好
安全性 中等 最好
兼容性 最好

我的结论

所以,当我们搞懂了这些不同的包管理工具的不同,我想,我们后续针对工具的选择,已经不用再讨论了。

pnpm --- 就是我们以后专业前端的包管理工具

结束语

前大厂前端技术专家,现大前端技术负责人,关注我,我会持续分享干货内容!

相关推荐
wuk99813 小时前
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
前端·websocket·网络协议
合作小小程序员小小店15 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步201516 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
Boop_wu16 小时前
[Java EE] 计算机基础
java·服务器·前端
Novlan117 小时前
TDesign UniApp 组件库来了
前端
用户479492835691517 小时前
React DevTools 组件名乱码?揭秘从开发到生产的代码变形记
前端·react.js
顾安r17 小时前
11.8 脚本网页 打砖块max
服务器·前端·html·css3
倚栏听风雨18 小时前
typescript 方法前面加* 是什么意思
前端
狮子不白18 小时前
C#WEB 防重复提交控制
开发语言·前端·程序人生·c#
菜鸟‍18 小时前
【前端学习】阿里前端面试题
前端·javascript·学习