切换主题

细细道来 pnpm ​

2022-11-04 09:47:27

传统工具的痛点 ​

  • 当我们开发时一般会有多个项目仓库，而多个仓库的项目依赖会有部分相同的。
  • 当我们使用 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.pngimage.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

写的不对的地方欢迎指正

Released under the MIT License.

Copyright © 2023-present