pnpm 之降本增效

作者:京东科技 于振京

受众简介

  • 前端研发工程师

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

相关文章

  • JavaScript的removeChild()函数用法详解

    JavaScript的removeChild()函数用法详解 什么是removeChild()函数? 在JavaScript中,使用removeChild()函数可以删除指定的子节点。 removeChild()函数的用法 要使用removeChild()函数,需要先找到要删除的节点,然后将其作为参数传递给removeChild()函数。例如: var el…

    JavaScript 2023年6月10日
    00
  • js 使FORM表单的所有元素不可编辑的示例代码

    js实现使FORM表单所有元素不可编辑的示例代码主要有以下三个步骤: 获取FORM表单中所有表单元素 遍历FORM表单中所有表单元素,将其属性设置为不可编辑 阻止表单的默认提交行为 下面分别讲解每个步骤的实现方法。 第一步:获取FORM表单所有表单元素 在JS中,可以通过querySelectorAll()方法获取FORM表单中所有的表单元素,如下所示: c…

    JavaScript 2023年6月10日
    00
  • 详解用函数式编程对JavaScript进行断舍离

    详解用函数式编程对JavaScript进行断舍离 函数式编程作为一种编程范式,正变得越来越受JavaScript开发者欢迎。它与传统的面向对象编程就像是石头和剪刀一样。让我们来详细了解一下,如何用函数式编程对JavaScript进行“断舍离”。 什么是函数式编程 函数式编程是一种编程模式,它的核心思想是将计算过程视为数学运算,每个函数都是输入一些参数,返回一…

    JavaScript 2023年6月10日
    00
  • JavaScript DOM节点添加示例

    当我们需要对网页中的元素进行动态的增删改时,JavaScript就是我们的好帮手之一。在JavaScript中,通过操作网页文档的对象模型(DOM)来实现对页面元素的增删改查。其中节点的添加,是常用的一种操作。 添加DOM节点的方法 在JavaScript中,有多种方式可以添加DOM节点,以下是其中的两种: 1. createElement()方法 crea…

    JavaScript 2023年6月10日
    00
  • 7个Python中的隐藏小技巧分享

    下面是“7个Python中的隐藏小技巧分享”的完整攻略: 1. 列表推导式 在Python中,使用列表推导式可以轻松地生成一个列表,从而简化代码。 示例代码如下: # 生成列表中的平方值 squares = [i**2 for i in range(10)] print(squares) 输出结果如下: [0, 1, 4, 9, 16, 25, 36, 49…

    JavaScript 2023年6月11日
    00
  • Web Animations API实现一个精确计时的时钟示例

    要实现一个精确计时的时钟示例,我们可以使用Web Animations API。这项API可以让我们通过JavaScript来控制CSS动画,而且可以精确定时。下面是实现的步骤: 步骤一:编写HTML代码 编写一个包含时钟的div元素和三个子元素的HTML结构,分别对应时针、分针和秒针。 <div class="clock">…

    JavaScript 2023年6月11日
    00
  • 在JavaScript中访问字符串的子串

    访问字符串的子串是JavaScript中常见的操作之一,在本文中我们将详细讲解如何用JavaScript来访问字符串的子串。 查找子串的位置 JavaScript中的indexOf方法可以帮助我们查找子串在原字符串中的位置。它的基本语法如下: str.indexOf(searchValue[, fromIndex]) 其中 searchValue 表示要查找…

    JavaScript 2023年5月28日
    00
  • layui原生表单验证的实例

    下面我来详细讲解一下“layui原生表单验证的实例”的完整攻略。 简介 layui是一款经典的前端UI框架,提供了丰富的组件和插件,其中包括表单验证组件。通过layui原生的表单验证可实现表单的实时验证、提交前的总体验证等功能。 示例1 假设我们有一个简单的表单,包含了姓名(name)、年龄(age)、邮箱(email)、密码(password)这四个输入项…

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