于永雨的学习笔记
  • 学海无涯
  • 前端基础
    • HTML
      • 语义化标签
      • script标签中defer和async
      • 本地存储
      • 拖拽
      • Web Workers
      • WebSocket
    • CSS
      • 盒模型和box-sizing
      • BFC(块级格式化上下文)
      • 浮动和清除浮动
      • 伪类和伪元素
      • 2倍图、3倍图
      • flex
      • 水平居中、垂直居中
      • 经典布局
        • 两列布局
        • 三列布局
      • 经典实践
      • CSS样式隔离
      • Less vs Sass
    • JavaScript
      • ES
        • 数据类型
          • 1-string
          • 2-number
          • 3-boolean
          • 4-null
          • 5-undefined
          • 6-symbol
          • 7-object
          • 常见类型判断
          • 浅拷贝、深拷贝
        • 数据集合
          • Array
          • 类数组对象
          • Map、WeakMap
          • Set、WeakSet
          • 常见遍历方式
        • 变量
          • 修饰符
          • 变量提升
        • 函数
          • apply、call、bind
          • new
          • this
          • 箭头函数
          • 闭包
          • 防抖和节流
          • 柯里化
        • 原型
          • 原型链
        • 异步
          • 单线程&事件循环
          • 常见异步
          • Promise
            • all和allSettled
            • race和any
            • resolve和reject
        • 模块化
        • 版本特性一览表
      • DOM
        • DOM事件
        • 事件分类
      • BOM
    • TypeScript
    • 浏览器
      • 页面渲染
      • 重绘和回流
      • 跨域
      • 垃圾回收
      • 取消请求
    • Web API
      • EventSource
      • XMLHttpRequest
      • WebSocket
      • IntersectionObserver
  • 前端框架
    • Vue
      • 2.0
        • 列表渲染的key
        • 生命周期
        • diff算法
      • 3.0
        • 改变
        • provide/inject
        • 组件间可复用逻辑封装
        • diff算法
    • React
      • Component
      • Props
      • State
      • Context
      • Effect
      • Hooks
        • hook依赖列表
        • useMemo
        • useCallback
        • useEffect
      • API
        • memo
      • 子组件的无效渲染
      • 组件在开发模式下渲染两次
    • Vue-Router
    • Taro
    • Qiankun
  • 前端方案
    • 错误上报
    • 性能优化
    • 长列表优化原理
    • H5移动端适配
  • 工程化
    • 前端
      • 防止package-lock.json删除
      • 打包ESM和CommonJS
      • babel
      • webpack
      • pnpm
      • 多包管理
      • vite
      • 各种base
    • 服务端
      • Maven
  • 小程序
    • 小程序历史
    • 双线程架构
    • 生命周期
    • 更新机制
  • 服务端
    • Redis
    • Node.js
      • 核心
      • 进程守护
      • Koa
    • Java
      • 安装与配置
    • Restful API
  • DevOps
    • Nginx
    • Docker
      • 核心概念
      • 基础命令
    • K8s
    • Linux
      • shell及脚本
      • 文件目录操作
      • vi/vim
  • 计算机基础
    • 数据结构
      • 栈(Stack)
      • 队列(Queue)
      • 数组(Array)
      • 链表(Linked List)
      • 树(Tree)
      • 图(Graph)
      • 堆(Heap)
      • 散列表(Hash Table)
    • 算法
      • 查找
      • 排序
  • 计算机网络
    • 基础
    • TCP
      • 建立连接(三次握手)
      • 断开连接(四次挥手)
    • UDP
    • HTTP
      • HTTP/2
      • HTTPS
    • 常见网络攻击
      • XSS
      • CSRF
      • DDos
      • MITM
    • 浏览器缓存
  • 经典面试题
    • 箭头函数this-1
    • 箭头函数this-2
    • 数组转树
    • 控制并发数
    • 动态规划-二维数组全排列
    • 柯里化
Powered by GitBook
On this page
  • 一、npm2时代
  • 1、原理图
  • 2、特点:
  • 3、问题:
  • 二、npm3、yarn时代
  • 1、原理图
  • 2、特点:
  • 3、问题:
  • 三、pnpm时代
  • 1、原理图:
  • 2、原理解释:
  • 3、问题
  • 4、扩展:软链接 vs 硬链接
  1. 工程化
  2. 前端

pnpm

pnpm浅析

PreviouswebpackNext多包管理

Last updated 2 years ago

一、npm2时代

1、原理图

2、特点:

  • 嵌套安装:每个依赖项都有自己的node_modules文件夹

3、问题:

  • 依赖树太深,超出windows上目录路径访问长度限制

  • 浪费磁盘空间,同一个依赖在不同包下被多次下载

二、npm3、yarn时代

1、原理图

2、特点:

  • 扁平安装:将依赖提升到平级,对于版本冲突的依赖项继续保留在包的node_modules中

3、问题:

  • 被提升的依赖不确定,取决于安装顺序(比如,先安装B,则被提升的则是C V2.0 )

  • 幽灵依赖,没有显式安装依赖却能在项目中直接引用,后续一旦依赖在某个版本被移除则会出问题

  • 重复安装(npm2时代的问题没有彻底解决)

npm2

- package A
    - packageX 1.0
    - packageY 1.0
- package B
    - packageX 2.0
    - packageY 2.0
- package C
    - packageX 1.0
    - packageY 2.0
- package D
    - packageX 2.0
    - packageY 1.0

npm3/yarn

- package X => 1.0版本
- package Y => 1.0版本

- package A
- package B
    - packageX 2.0
    - packageY 2.0
- package C
    - packageY 2.0
- package D
    - packageX 2.0

如上所示的packageX 2.0和packageY 2.0被重复安装多次

三、pnpm时代

pnpm(persistent npm),主要特点:依赖包的持久化

1、原理图:

2、原理解释:

  • node_modules下除了package.json中的依赖,还有一个.pnpm,所有的依赖包在.pnpm是平级结构,命名形式:包名@版本号

  • .pnpm是个一个虚拟store(Virtual store),里面的依赖包硬链接到真实Store(Content-addressable store)中,真实Store才是依赖包文件真正的存储位置

  • package.json中的依赖(比如express)通过软链接,指向.pnpm下对应的依赖包

  • 每次pnpm安装先检查Store,如果已经存在,直接通过硬链接的形式连接到.pnpm;如果不存在,则先下载,然后再硬链接过来

概括:依赖包 ---(软链接)--- > .pnpm ----(硬链接) ---> Store

3、问题

  • 硬链接在 window 系统有兼容性的问题

  • CI/CD 中因为依赖包是全局存储,可能会命中不同的机器,也有可能存在权限的问题

4、扩展:软链接 vs 硬链接

  • 硬链接:(指向目标文件的存储地址)

    • 与普通文件没什么不同,inode 都指向同一个文件在硬盘中的区块

    • 硬链接不管有多少个,都指向的是同一个 inode 节点,这意味着当你修改源文件或者链接文件的时候,都会做同步的修改

    • 每新建一个 hardlink 会把节点连接数增加,只要节点的链接数非零,文件就一直存在,不管你删除的是源文件还是 hradlink。

    • 只要有一个链接存在,文件就存在。

  • 软链接:(指向目标文件的引用)

    • 保存了其代表的文件的绝对路径,是另外一种文件,在硬盘上有独立的区块,访问时替换自身路径

参考:

https://mp.weixin.qq.com/s/4pXTxgqpIzanfcm75_vNJQ
https://mp.weixin.qq.com/s/ABnLJlDpxRQSbiHaA-yTDg
pnpm 原理图
软链接 vs 硬链接