pnpm 之降本增效

pnpm,降本增效 · 浏览次数 : 106

小编点评

**作者:京东科技** **简介:** 作者介绍了使用npm和pnpm在安装依赖包的过程中存在的问题,包括npm扁平化node_modules依赖版本冲突、pnpm安装包耗时较长等。 **npm扁平化node_modules依赖版本冲突:** npm使用package-lock.json进行软件包的安装,如果没有package-lock.json,npm会根据package.json进行生成并对安装的依赖包扁平化处理。然而,当依赖包数量比较多时,npm的扁平化算法可能会变得非常缓慢。 **pnpm安装包耗时较长:** pnpm使用软链接或硬链接的方式管理依赖包,而npm使用硬链接。软链接和硬链接在文件系统中的位置不同,导致pnpm在执行安装命令时需要访问多个文件。此外,pnpm默认创建了一个非平铺的node_modules,这会使npm扁平化处理变得更加复杂。 **其他问题:** * npm v3引入了扁平化机制,解决地域依赖问题。 * 尽管pnpm做了下载优化和缓存,但与npm相比还是略逊一些占用存储空间较大。 * 开发机或服务器前端工程较多时,工程越多冗余包就会越多扁平化处理,npm v3之后引入了扁平化机制,解决地域依赖问题,但又带来了以下几个问题-- 依赖结构的不确定性-- 扁平化算法本身复杂性高,耗时较长-- 项目中仍然可以非法访问没有声明过依赖的包 (幽灵依赖)

正文

作者:京东科技 于振京

受众简介

  • 前端研发工程师

还在为npm i安装大量依赖等待时间较长,npm扁平化node_modules依赖版本冲突在苦恼吗,不用苦恼pnpm为你保驾护航

  • 主要影响:安装依赖包的过程,假如使用的是npm install会根据package-lock.json进行软件包的安装,如果没有package-lock.json会根据package.json进行生成并对安装的依赖包扁平化处理,安装依赖包的时长由两个因素导致:
    1.package.json依赖包的量
    2.网速

  • 运维工程师

前端服务器由于部署工程较多,依赖包占用磁盘空间太大,不够用怎么办,还在花钱申请扩容吗,使用pnpm解决你的问题

主要影响:构建前端工程时jenkin任务一般会清除服务器的node_modules然后重新安装依赖,避免构建最新分支代码缺少依赖,另外一台服务器可能会部署很多前端工程,这样就会存在不同工程中安装了相同的依赖浪费服务器磁盘空间

没用pnpm时

我们使用以下几种工具管理依赖包

  • npm:nodejs自带工具,万物之主它的诞生给前端带来了春天

  • npx:npm同根同源,区别在于npm将依赖安装在本地,而npx避免了本地安装,直接对依赖包寻址执行

  • nrm:npm的镜像源管理工具,使用它可以快速切换npm

  • cnpm:淘宝镜像包管理工具

  • yarn:facebook推出的包管理工具,曾风靡一时

由于本章的主角是pnpm以上工具不做详细介绍,但以上包管理工具都有以下几个问题

  1. 安装包耗时较长,虽yarn做了下载优化和缓存,但与pnpm相比还是略逊一些

  2. 占用存储空间较大,当开发机或服务器前端工程较多时,工程越多冗余包就会越多

  3. 扁平化处理,npm v3之后引入了扁平化机制,解决地域依赖问题,但又带来了以下几个问题
    -- 依赖结构的不确定性
    -- 扁平化算法本身复杂性很高,耗时较长
    -- 项目中仍然可以非法访问没有声明过依赖的包 (幽灵依赖)

用了pnpm后

我们会得到以下几个buff加持

  • 快速:官网解释:比其他包管理模块快2倍

  • 高效:通过软硬链接寻址存储库,已达到节省磁盘的目的

  • 严格:pnpm默认创建了一个非平铺的node_modules,因此避免了相同插件不同版本引用不对称的问题,此设计完美解决了地域依赖幽灵依赖

认识软硬链接

对于pnpm为什么能达到【快速】和【高效】,就需要认识下软链接硬链接

  • 硬链接

电脑文件系统中的多个文件共享一个文件存储单元
window: mklink /H aaa_hard.js aaa.js
macos: ln aaa.js aaa_hard.js

  • 软链接

以绝对或者相对路径的形式指向其他文件目录的引用
window: mklink aaa_soft.js aaa.js
macos: ln -s aaa.js aaa_soft.js

在执行pnpm installpnpm add <pkg>命令时,PNPM会自动使用硬链接、软链接的方式管理依赖包

npm与pnpm命令对比

pnpm官网:https://pnpm.io/zh/

收益

image.png

上图是同一个工程使用npm和pnpm所需时间比较,npm耗时179.612秒而pnpm只需要27.3

与pnpm 之降本增效相似的内容:

pnpm 之降本增效

还在为npm i安装大量依赖等待时间较长,npm扁平化node_modules依赖版本冲突在苦恼吗,不用苦恼pnpm为你保驾护航

pnpm配置

之前通过 nvm 来管理了 nodejs 版本,结果安装 pnpm 之后,安装全局依赖报错,如下: PS C:\Users\Administrator> pnpm i -g commitizen ERROR Unable to find the global bin directory Run "p

vue3 | mitt的基本使用

# 一、安装 npm安装 ``` npm i mitt ``` pnpm安装 ``` pnpm i mitt ``` yarn安装 ``` yarn add mitt ``` # 二、使用 ## (一)、当前组件内使用 ```javascript import mitt from 'mitt' //

【前端求助帖】关于使用element-plus select 模板嵌套popover中使用select选择后,上一个select自动关闭的问题

先看下效果 主页代码如下 项目使用的是Vue3+vite, 下载后,直接pnpm i安装依赖, pnpm dev 就是可以跑起来 打开弹框

视野修炼-技术周刊第57期

① Rspress - 基于 Rspack 的高性能静态站点生成器 ② We OCR - 支持离线使用的图片文字识别工具 ③ pnpm v8.9 - MacOS上带来更大的性能提升 ④ 用户体验:嵌套菜单! ⑤ Draggable objects - 详细介绍网页元素的拖拽实现

vue3项目实战+element-plus

记录自己搭建前端项目的学习过程和开发过程,希望一起学习进步 采用Vue3+element-plus+axios+vue-router+sass……(目前刚开始是用到了这些,随着开发慢慢更新) npm是比较慢的, 所以我用的是pnpm。安装指令:npm i pnpm 简单介绍下作用 Vue3:前端框架

DHorse v1.4.0 发布,基于 k8s 的发布平台

版本说明 新增特性 提供Fabric8客户端操作k8s(预览)的功能,可以通过指定-Dkubernetes-client=fabric8参数开启; Vue、React应用增加Pnpm、Yarn的构建方式; 支持Go、Flask、Django、Nuxt应用部署; 优化特性 副本指标数据保存为3天; 部