详解:npm升级到pnpm对比优化点!!

npm@3之前

  • 依赖树层级过深,导致依赖路径过长
  • 并且相同依赖模块会被重复安装,占用电脑磁盘空间

npm@3之后


修改为扁平化处理

  • 算法复杂
  • 存在多项目间依赖相同副本的情况
  • 导致没有明确被依赖的包也可以直接引用,管理复杂

pnpm


node_modules改成非扁平化结构,并且改为使用硬链+软链的形式

软链接 :创建的快捷方式,其实保存的只是一个地址
硬链接:磁盘具体的引用路径

  • 所有的文件被实际安装在.pnpm-store文件夹下面(使用 pnpm store path 查看),node_modules下面依赖会最终通过硬链接的形式链接到该文件夹,保证了不同项目间共享相同依赖版本的使用,减少依赖包副本
  • node_modules下面的直属依赖都是软链接的形式,链接到.pnpm文件下面的指定依赖
  • 在.pnpm对应直属依赖的node_modules中,分为两种链接。其中直属依赖本身使用的是硬链接链接到.pnpm-store文件夹里面;而剩余的其他依赖包是使用软链接 链接到.pnpm文件下面的指定依赖。所以!!!!只有找到依赖自身,才会通过硬链接找到磁盘中的位置,这样可以保证同一个项目里不同依赖也不会重复安装,同时不同项目之间的相同依赖也无需在磁盘中存储多份

例如:根目录下 axios 软链接到 .pnpm 目录下的 axios 文件夹中,展开 .pnpm/axios@16.1 的node_modules 文件夹,其中有 axios 所需的依赖,包含 axios、follow-redirects、form-data、proxy-from-env,其中 axios硬链接到磁盘中(即与 pnpm 仓库保存的地址一致),其它文件软链接到 .pnpm 的自身位置。

  • 优点1: 对于非明确依赖的包做隔离
  • 优点2: 不同项目的相同依赖只存在一个副本,避免了重复依赖重复安装,节约磁盘空间
  • 优点3: 同一依赖包的不同版本,那么只有版本之前不用的文件被存储起来
  • 优点4: 避免了循环引用和层级过深的问题(都在.pnpm-store文件夹的第一层)
相关推荐
清风徐来QCQ4 分钟前
js中的模板字符串
开发语言·前端·javascript
成都渲染101云渲染66669 分钟前
Houdini+Blender高效渲染方案(高配算力+全渲染器兼容)
前端·系统架构
SuperEugene25 分钟前
Vue3 + Element Plus 表格实战:批量操作、行内编辑、跨页选中逻辑统一|表单与表格规范篇
开发语言·前端·javascript
极梦网络无忧1 小时前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
Predestination王瀞潞1 小时前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛1 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr1 小时前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹1 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang1 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术2 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建