pnpm 之降本增效

yizhihongxing

作者:京东科技 于振京

受众简介

  • 前端研发工程师

还在为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/

pnpm 之降本增效

收益

image.png

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

原文链接:https://www.cnblogs.com/Jcloud/p/17295377.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:pnpm 之降本增效 - Python技术站

(0)
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • Js与Jq获取浏览器和对象值的方法

    我们可以使用 JavaScript 和 jQuery 获取浏览器属性和对象值。下面详细讲解 Js 与 Jq 获取浏览器属性和对象值的方法。 获取浏览器属性 我们可以获取浏览器的宽度、高度、名称、版本等属性。下面是获取浏览器属性的方法: 使用原生 JavaScript 获取浏览器宽度和高度 let width = window.innerWidth; let …

    JavaScript 2023年6月11日
    00
  • JS面试题解[‘1’, ‘7’, ’11’].map(parseInt) 输出

    题目描述:给定数组 [‘1’, ‘7’, ’11’],执行 [‘1’, ‘7’, ’11’].map(parseInt),输出什么? 首先,让我们看看 map、parseInt 函数的用法和参数形式。 map 函数 map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 arr.map(callback(currentV…

    JavaScript 2023年5月28日
    00
  • JS类的封装及实现代码

    JS类的封装是指通过将变量和操作封装在一个类中,来实现对变量及操作的保护和控制。类的封装可以提高代码的复用性,可读性和可维护性。 以下是JS类的封装及实现代码的步骤: 1. 设计类的结构 在设计类的结构时,需要考虑类的成员变量和方法,及它们的访问权限。 class MyClass { constructor(prop1, prop2) { this._pro…

    JavaScript 2023年6月10日
    00
  • Javascript array类 数组操作方法

    JavaScript 的 Array 类是经常被使用的一种数据类型,用于存储有序且可变长度的数据。为了更好的操作数组,JavaScript 提供了丰富的数组操作 API,包含创建、增加、删除、遍历和排序等方法。本文将介绍 JavaScript 的 Array 类的常用操作方法及其使用方法,内容如下: 创建数组 语法 new Array(); // 空数组 n…

    JavaScript 2023年6月10日
    00
  • JavaScript for循环

    JavaScript 中的 for 循环是一种常用的迭代结构,用于按照指定条件多次执行某些操作。其语法如下: for (initialization; condition; increment/decrement) { // 执行操作 } 其中,initialization 是循环的初始条件,通常是声明一个计数器变量;condition 是循环的终止条件,在…

    Web开发基础 2023年3月30日
    00
  • JS如何通过FileReader获取.txt文件内容

    获取.txt文件内容的完整攻略可以分为以下几个步骤: 获取input标签上传的文件对象。 利用JavaScript中的FileReader API读取文件内容。 将文件内容进行处理展示。 下面我们分别介绍每个步骤的具体实现。 第一步:获取上传的文件对象 在HTML中,我们可以通过input标签来实现文件上传功能。例如: <label for=&quot…

    JavaScript 2023年5月27日
    00
  • Javascript入门学习第八篇 js dom节点属性说明第1/2页

    让我来为你讲解“Javascript入门学习第八篇 js dom节点属性说明第1/2页”的完整攻略。 理解 DOM 节点属性 DOM 节点是网页中的 HTML 元素,如文本、图像和按钮等。每个节点都有一些属性,这些属性用来指定节点的特征和状态。理解这些节点属性对于 Javascript 开发人员来说非常必要。 常见的 DOM 节点属性 常见的 DOM 节点属…

    JavaScript 2023年5月18日
    00
  • 学习JavaScript设计模式(接口)

    学习JavaScript设计模式(接口)的完整攻略 什么是接口? 在JavaScript中,接口是一种抽象的概念,用于定义对象应该具有哪些方法。接口只定义方法名和参数,而没有具体的实现。 接口的作用 接口用于规范对象的行为,可以避免代码混乱和不可预测性。它定义了一种契约,约束了对象应该具有哪些方法。使用接口可以使代码更加灵活、可维护和可扩展。 如何定义接口?…

    JavaScript 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部