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日

相关文章

  • JS实现新建文件夹功能

    下面我们来讲解一下JS实现新建文件夹的功能的完整攻略。 1. 前置知识 在开始阐述具体实现方法之前,我们先简单介绍一下一些前置知识: HTML: 用于搭建页面结构 CSS: 用于美化页面样式 JavaScript(JS): 在页面中增加交互动态效果 其中,前两项是每个Web开发者的基本功,这里不再赘述,主要介绍JS的相关知识。 JS通常用于给页面添加动态交互…

    JavaScript 2023年5月27日
    00
  • JavaScript:Date类型全面解析

    JavaScript: Date类型全面解析 Date 类型是 JavaScript 中最常用的类型之一,它可以用于日期和时间的操作。这篇文章将全面讲解 Date 类型的相关知识。 创建 Date 对象 可以使用 new 操作符来创建一个 Date 对象,如下面的代码: const now = new Date(); 这个对象将包含当前日期和时间的信息。 另…

    JavaScript 2023年5月27日
    00
  • 原生js实现旋转木马效果

    实现旋转木马效果,可以分为如下几个步骤: 初始布局 在HTML中创建一个容器元素,然后在其中添加多个子元素,这些子元素将组成我们的木马效果。为了充分体现木马效果,这些子元素需要位置排列形成一个环。 样式与动画 为容器元素以及子元素定义样式,使其在页面中呈现出我们想要的样式和动画效果。通过CSS3中的转换、动画控制元素的旋转、移动、透明度等效果。在这里,我们需…

    JavaScript 2023年6月11日
    00
  • JS 5种遍历对象的方式

    JS中有5种遍历对象的方式,分别为for…in、Object.keys()、Object.getOwnPropertyNames()、Object.values()和Object.entries()。下面详细介绍这5种遍历方式的用法及示例。 for…in for…in语句可用于遍历对象的属性。它比较慢,但用的相对频率最高,因为它适用于对象和数组(…

    JavaScript 2023年5月27日
    00
  • JavaScript实现烟花特效(面向对象)

    当下,烟花特效是web前端常见的动画效果之一,本攻略将详细介绍如何通过JavaScript编写实现烟花特效。 步骤一:创建HTML文件 在开发本特效之前,首先需要建立一个HTML文件用于展示页面内容。以下是一个基本的HTML模板,用户可以根据需要添加和修改其他元素: <!DOCTYPE html> <html> <head&gt…

    JavaScript 2023年6月10日
    00
  • js实现炫酷光感效果

    实现炫酷光感效果的攻略: 利用CSS3的linear-gradient实现光感渐变效果 CSS3的linear-gradient是产生线性渐变效果的方法,我们可以利用它来制作光感渐变效果。具体实现方法如下: .light{ background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 2…

    JavaScript 2023年6月10日
    00
  • 详解JavaScript中typeof与instanceof用法

    详解JavaScript中typeof与instanceof用法 typeof typeof 是用于判断一个变量的基本数据类型的关键字,无法判断对象的具体类型。 如果变量是字符串,返回 “string”。 如果变量是数字,返回 “number”。 如果变量是布尔型,返回 “boolean”。 如果变量是对象,返回 “object”。 如果变量是函数,返回 “…

    JavaScript 2023年5月27日
    00
  • JavaScript对JSON数组简单排序操作示例

    下面是针对“JavaScript对JSON数组简单排序操作”的完整攻略。 一、什么是JSON数组 JSON数组(JavaScript Object Notation Array)是一种数据格式,是JavaScript语言中的一种数据结构,它用于存储一组相关类型的数据,这些数据以键值对的形式存储,基本格式为:[key:value]。其中,键表示属性名称,值表示…

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