Turbo:比 Yarn 和 NPM 快 5 倍,并且在浏览器中原生运行

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 本文适合觉得React难学,或者想重头系统化学习React的小伙伴。

一、前言


https://stackblitz.com/

   为什么能做在线的IDE?广东靓仔出于好奇,探了一探路~

image.png

在线编辑器截图


二、Turbo 是啥


Turbo 是一个极快的 NPM 客户端,具有以下特点:

  • 安装包的速度比 Yarn 和 NPM 快 ≥5 倍
  • 尺寸缩小node_modules最多两个数量级
  • 具有多层冗余以实现生产级可靠性
  • 完全在您的网络浏览器中运行,实现闪电般快速的开发环境

image.png

使用 Turbo 的 NPM 包的实际安装速度


三、为什么


与 NPM & Yarn 可以在本地提供的体验形成鲜明对比。由于它们旨在处理本地二进制文件和其他资产所需的大量依赖后端代码库,因此它们的安装过程需要更类似于半卡车而不是超级跑车的东西。但是前端代码很少依赖如此大量的依赖,那么问题是什么?好吧,这些依赖项仍然作为 dev 和子依赖项滑入安装过程,并且下载和提取都一样,导致臭名昭著的黑洞被称为node_modules


image.png

Dank,相关模因(如上图所示)


这是阻止 NPM 在浏览器中本地工作的症结所在。解析、下载和提取其node_modules文件夹中包含的数百兆字节(或千兆字节)的典型前端项目是一个挑战,浏览器并不适合。此外,这也是为什么现有的针对该问题的服务器端解决方案被证明是缓慢、不可靠且成本过高原因。


那么,如果 NPM 本身不能在浏览器中运行,如果我们从头开始构建一个全新的 NPM 客户端会怎样?


四、解决方案


专为网络构建的更智能、更快速的包管理器

Turbo 的速度和效率在很大程度上是通过利用现代前端应用程序用于快速性能的相同技术来实现的——tree-shaking、延迟加载和使用 gzip 的普通 ol' XHR/fetch。


仅按需检索您需要的文件

Turbo 不是下载整个 tarball,而是智能的,只从 maintypings 和其他相关字段中检索直接需要的文件。这消除了单个包装中惊人的自重,在大型项目中更是如此:

image.png

RxJSRealWorld Angular的总压缩负载大小的比较


那么如果你导入一个主字段不需要的文件,比如Sass 文件,会发生什么?没问题——Turbo 只是按需延迟加载它并将其持久化以供将来使用,类似于 Microsoft 的新GVFS Git 协议的工作方式。


具有多种故障转移策略的强大缓存

Turbo 特定的 CDN,它可以在一个 gzip 压缩的 JSON 请求中为任何 NPM 包提供水合物,从而极大地提高了包安装的速度。这个概念类似于 NPM 的 tarball,它将包中的所有文件连接起来并 gzip 压缩它们,而 Turbo 的缓存智能地只连接应用程序需要的文件并 gzip 压缩它们。


每个 Turbo 客户端都在浏览器中运行独立的,如果无法从我们的缓存中检索到包,则会自动从jsDelivr 的生产级 CDN直接按需下载适当的文件。但是如果 jsDelivr 也宕机了怎么办?不费吹灰之力——然后它转而使用Unpkg 的 CDN,为您提供三个独立的冗余层,以实现超可靠的软件包安装


闪电般的快速依赖解决

为了确保最小的有效负载大小,Turbo 使用自定义解析算法来尽可能积极地解析常见的包版本。它也非常快速和冗余:解析器的无服务器版本可以访问 NPM 的整个内存数据集,并在 <85ms 内解析任何 package.json。如果 Turbo 在连接到无服务器解析器时遇到任何问题,它会优雅地故障转移到完全在浏览器中运行并检索所有必需的元数据以进行解析。


在客户端上进行依赖解析也开辟了一些新的和令人兴奋的可能性,例如一键安装缺少的对等依赖项的能力。

image.png

因为没有人会阅读那些 npm 管道进入控制台的警告


证明可以大规模工作

Turbo 现在每月可靠地处理数以千万计的请求,而间接成本可以忽略不计,我们也很高兴地宣布,谷歌的 Angular 团队最近选择了 StackBlitz 来支持数百万开发人员在他们的文档中使用的所有实时示例!


现在在技术预览中

Turbo 已在StackBlitz.com上线,在技术预览阶段,我们将进行大量测试并发布速度、效率和可靠性改进,您的反馈对所有这些都至关重要 — 所以请不要犹豫提交任何文件您遇到的问题或在我们的 Discord 社区中与我们聊天!

虽然 Turbo 最初是为在真实 IDE 中的生产级使用而设计的,但其中的一部分已经进入了一些在线游乐场,我们社区中的人们甚至开始设计一种方法来使script type=module与 Turbo 一起工作(多么酷啊??)。我们迫不及待地想看到人们想出的所有其他令人惊奇的东西,所以一旦我们的 API 流失平稳,我们将在我们的 Github存储库中将所有这些(以及 StackBlitz 的许多其他部分)开源给全世界使用。


五、最后


  本文到这里就结束了,有兴趣可以前往官方地址,进行进一步的学习https://github.com/stackblitz/core

相关文章
|
3月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
5月前
|
资源调度 JavaScript Linux
nvm, node.js, npm, yarn 安装配置
nvm, node.js, npm, yarn 安装配置
246 1
|
1月前
|
分布式计算 资源调度 Hadoop
在YARN集群上运行部署MapReduce分布式计算框架
主要介绍了如何在YARN集群上配置和运行MapReduce分布式计算框架,包括准备数据、运行MapReduce任务、查看任务日志,并启动HistoryServer服务以便于日志查看。
37 0
|
3月前
|
SQL 弹性计算 资源调度
云服务器 ECS产品使用问题之bin/spark-sql --master yarn如何进行集群模式运行
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
4月前
|
存储 缓存 资源调度
你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗?
【6月更文挑战第9天】NPM、Yarn和PNPM是主流前端包管理器,各有特色。NPM生态庞大,易用但速度慢;Yarn速度快,依赖管理稳定;PNPM性能优异,节省磁盘空间。Yarn和PNPM在速度和确定性上胜出,NPM因广泛使用和丰富资源领先。开发者可根据项目需求和喜好选择,三者共同推动前端开发进步。
112 8
|
4月前
|
资源调度
npm yarn 启动报错【已解决】
npm yarn 启动报错【已解决】
49 2
|
4月前
|
安全 JavaScript 前端开发
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
32 2
|
3月前
|
JavaScript
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
286 0
|
4月前
|
JavaScript
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
|
4月前
|
存储 缓存 资源调度
npm、yarn与pnpm详解
npm、yarn与pnpm详解
86 0