Yarn 和 npm 评测对比,如何混合使用?
ztj100 2024-11-07 13:40 48 浏览 0 评论
前言:
在之前的文章中,给大家简单介绍了yarn的基本概念和命令使用方法。我们说,yarn是一个非常具有竞争力的依赖管理工具。甚至最近几年,它的热度一度超过传统工具npm。它简洁的日志输出方式,依赖管理方案,以及下载速度,都给开发者带来了非常棒的体验。下面我给大家用实际开发场景测试一下,具体说明yarn的优势。
1. 待测试命令
通过以上待测试命令,我们可以看到:
- 相同功能的命令,yarn的命令更加简洁,且更加语义化。
- yarn的全局安装使用 global 命令,但是yarn本身并不希望我们全局安装某些包,更希望我们每一个项目单独去管理依赖及版本。全局安装某些包后,如果需要删除模块,用 yarn global remove 就好,如果需要清除缓存,用 yarn cache clean 。
- 如npm run 等很多命令,我们可以直接替换成yarn run,降低了学习记忆成本。
2. 命令运行效果
为了方便大家看到测试运行效果,我们简单做了前期准备,使用vue cli初始化了一个项目,在相同的环境相同的网速情况下安装一些依赖。
先介绍一下我们项目 package.json 里的配置项
首先,我们使用npm来安装这些依赖:
然后,我们删除 node_modules 文件夹中已经安装好的依赖,使用yarn重新安装一遍。
总结:通过以上测试,我们可以明显的看出,同样的安装依赖,使用yarn 安装的log输出,页面简洁内容详细,而npm相比之下就逊色了很多。并且最重要的,yarn的速度优势体现的淋漓精致,比npm的速度快了几倍。这只是在依赖很少的项目中就可以看出速度对比,在我们日常开发的大型前端项目框架中,yarn的速度优势会更加明显。
npm 和 yarn混合使用
在平时的开发中,尤其是一些相对较老的项目,我们是通常是使用npm来初始化项目的。那现在我们想使用yarn,是不是就要重新搭建环境,或者改动很多配置呢?答案是no,我们不需要做什么改动,因为它们都遵循着同一个配置文件 package.json 的规范,我们可以直接在npm的基础上使用yarn,也能完美运行,下面,用实际项目证明我们的观点。
同样还是使用上文中的配置项。
然后我们使用npm来初始化项目,安装基础依赖。
安装完成后我们的项目就多了一个 node_modules 文件夹,里面就是我们用npm安装的所有依赖。
接下来,我们使用 yarn ,在npm安装的依赖基础上再追加一个新的依赖包 elementUI
安装成功!说明安装是没问题的,然后我们再尝试使用 yarn 卸载 npm 安装的依赖。
删除成功,说明 yarn 可以完美适配 npm 的项目,我们可以将原有的npm项目平滑的过渡到yarn项目,非常的方便。
相比npm,yarn在安装过程中的优势
- 离线模式:yarn会有一个缓存目录,会缓存以前安装过的软件包,再次安装时就不必从网络下载了,大大加速安装速度。
- 性能优化:下载软件时会自动优化请求顺序,使安装效率更高。
- 网络回弹:yarn在某个安装包请求失败时不会导致安装失败,它会自动去尝试重新安装。而npm则会毫不犹豫的失败,导致得再来一次,耗费时间
小结
通过以上测评,相信大家已经感受到了yarn的优势,希望在日常开发中,大家有机会可以多尝试多总结,提高我们的开发效率和体验。
相关推荐
- 离谱!写了5年Vue,还不会自动化测试?
-
前言大家好,我是倔强青铜三。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。Playwright是一个功能强大的端到...
- package.json 与 package-lock.json 的关系
-
模块化开发在前端越来越流行,使用node和npm可以很方便的下载管理项目所需的依赖模块。package.json用来描述项目及项目所依赖的模块信息。那package-lock.json和...
- Github 标星35k 的 SpringBoot整合acvtiviti开源分享,看完献上膝盖
-
前言activiti是目前比较流行的工作流框架,但是activiti学起来还是费劲,还是有点难度的,如何整合在线编辑器,如何和业务表单绑定,如何和系统权限绑定,这些问题都是要考虑到的,不是说纯粹的把a...
- Vue3 + TypeScript 前端研发模板仓库
-
我们把这个Vue3+TypeScript前端研发模板仓库的初始化脚本一次性补全到可直接运行的状态,包括:完整的目录结构所有配置文件研发规范文档示例功能模块(ExampleFeature)...
- Vue 2迁移Vue 3:从响应式到性能优化
-
小伙伴们注意啦!Vue2已经在2023年底正式停止维护,再不升级就要面临安全漏洞没人管的风险啦!而且Vue3带来的性能提升可不是一点点——渲染速度快40%,内存占用少一半,更新速度直接翻倍!还在...
- VUE学习笔记:声明式渲染详解,对比WEB与VUE
-
声明式渲染是指使用简洁的模板语法,声明式的方式将数据渲染进DOM系统。声明式是相对于编程式而言,声明式是面向对象的,告诉框架做什么,具体操作由框架完成。编程式是面向过程思想,需要手动编写代码完成具...
- 苏州web前端培训班, 苏州哪里有web前端工程师培训
-
前端+HTML5德学习内容:第一阶段:前端页面重构:PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局;第二阶段:高级程序设计:原生交互功能开发、面向对象开发与ES5/ES6、工具库...
- 跟我一起开发微信小程序——扩展组件的代码提示补全
-
用户自定义代码块步骤:1.HBuilderX中工具栏:工具-代码块设置-vue代码块2.通过“1”步骤打开设置文件...
- JimuReport 积木报表 v1.9.3发布,免费可视化报表
-
项目介绍积木报表JimuReport,是一款免费的数据可视化报表,含报表、大屏和仪表盘,像搭建积木一样完全在线设计!功能涵盖:数据报表、打印设计、图表报表、门户设计、大屏设计等!...
- 软开企服开源的无忧企业文档(V2.1.3)产品说明书
-
目录1....
- 一款面向 AI 的下一代富文本编辑器,已开源
-
简介AiEditor是一个面向AI的下一代富文本编辑器。开箱即用、支持所有前端框架、支持Markdown书写模式什么是AiEditor?AiEditor是一个面向AI的下一代富文本编辑...
- 玩转Markdown(2)——抽象语法树的提取与操纵
-
上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布,转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候,心血来潮,把玩转Markdown(2)给补上了。...
- DeepseekR1+ollama+dify1.0.0搭建企业/个人知识库(入门避坑版)
-
找了网上的视频和相关文档看了之后,可能由于版本不对或文档格式不对,很容易走弯路,看完这一章,可以让你少踩三天的坑。步骤和注意事项我一一列出来:1,前提条件是在你的电脑上已配置好ollama,dify1...
- 升级JDK17的理由,核心是降低GC时间
-
升级前后对比升级方法...
- 一个vsCode格式化插件_vscode格式化插件缩进量
-
ESlint...
你 发表评论:
欢迎- 一周热门
-
-
MySQL中这14个小玩意,让人眼前一亮!
-
旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起
-
【VueTorrent】一款吊炸天的qBittorrent主题,人人都可用
-
面试官:使用int类型做加减操作,是线程安全吗
-
C++编程知识:ToString()字符串转换你用正确了吗?
-
【Spring Boot】WebSocket 的 6 种集成方式
-
PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL
-
pytorch中的 scatter_()函数使用和详解
-
与 Java 17 相比,Java 21 究竟有多快?
-
基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化
-
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)