2022年了 你还不懂pnpm?

115 阅读3分钟

传统工具的痛点

  • 当我们开发时一般会有多个项目仓库,而多个仓库的项目依赖会有部分相同的。
  • 当我们使用npm/yarn安装依赖时就会产生一个问题,会下载多个重复的依赖
  • 比如我们电脑上有10个项目 每个项目都有axios这个依赖 那我们就要下载10次axios 造成一部分的空间被重复的依赖所占用
  • 而pnpm解决了这个痛点

pnpm

P(Performant) NPM 高性能的NPM

在说pnpm前我们要先知道两个概念

硬链接

硬链接是计算机文件系统中的多个文件平等地共享同一个文件存储单元

软连接(符号链接)

软连接是一类特殊的文件, 其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用

  • 看完概念就是一脸懵逼 我们来实践一下

  • 先来操作下硬链接 首先有一个源文件 meta.js image.png

  • 然后我们为meta.js创建一个硬链接(这里使用的Mac win的命令不同) image.png

  • 当我们在meta.js文件中进行了修改并保存之后 会看到hard.js中的内容同步修改了(可以试一试) image.png

  • 同理修改hard.js中的内容meta.js也会被修改 这一点和浅拷贝有些像

  • 然后我们来操作下软链接

  • 通过命令创建一个软链接 image.png

  • 可以看到创建的软链接会有一个小符号

  • 当我们打开软连接的文件时 实际上访问的是meta.js

  • 我们查看下软链接文件的大小 可以看到只有7字节的大小 因为软链接中保存的是一个指向源文件的一个引用 或者说是一个路径 不是文件本身 image.png

  • 如果还没明白的话 大家都在电脑上下载过游戏吧 我们每次打开游戏的时候 应该没有人去文件夹中找到游戏目录再去打开exe文件 是不是都是在桌面上通过一个个快捷方式打开的 这个快捷方式就和软链接有异曲同工之妙

  • 再来看下硬链接文件的大小 和meta.js文件大小完全相同 因为他们指向的在磁盘中是同一个文件 image.png image.png

说回正题

pnpm如何解决重复依赖的问题

  • pnpm下载依赖时会在统一的位置存储依赖
  • 相同的依赖只会下载一次 所有的项目共享这一个包
  • 当其他的项目也需要这个包时 不会再去下载 而是建立一个硬链接
  • 如果我们依赖相同的库的不同版本 比如axios1.1.1和axios1.1.2 只有版本间不同的文件被储存起来

pnpm创建非扁平化的node_modules

  • 由pnpm创建的node_modules是非扁平化的 由硬链接和软链接共同构成

  • 我们使用pnpm安装下axios 目录结构是这样的 image.png

  • 可以看到外边的axios是一个软链接 而真正的依赖在.pnpm文件夹下

  • node_modules下的axios是一个硬链接 指向磁盘中依赖的真实存放位置

  • 而axios依赖的其他包是一个软链接 如果是硬链接的话 如果其他包也依赖这个包 那么就会造成不必要的内存占用

image.png

  • 可以看一下官网中的这幅图

image.png

写的不对的地方欢迎指正