一、前言
为什么能做在线的IDE?广东靓仔出于好奇,探了一探路~
在线编辑器截图
二、Turbo 是啥
Turbo 是一个极快的 NPM 客户端,具有以下特点:
- 安装包的速度比 Yarn 和 NPM 快 ≥5 倍
- 尺寸缩小node_modules最多两个数量级
- 具有多层冗余以实现生产级可靠性
- 完全在您的网络浏览器中运行,实现闪电般快速的开发环境
使用 Turbo 的 NPM 包的实际安装速度
三、为什么
与 NPM & Yarn 可以在本地提供的体验形成鲜明对比。由于它们旨在处理本地二进制文件和其他资产所需的大量依赖后端代码库,因此它们的安装过程需要更类似于半卡车而不是超级跑车的东西。但是前端代码很少依赖如此大量的依赖,那么问题是什么?好吧,这些依赖项仍然作为 dev 和子依赖项滑入安装过程,并且下载和提取都一样,导致臭名昭著的黑洞被称为node_modules
:
Dank,相关模因(如上图所示)
这是阻止 NPM 在浏览器中本地工作的症结所在。解析、下载和提取其node_modules
文件夹中包含的数百兆字节(或千兆字节)的典型前端项目是一个挑战,浏览器并不适合。此外,这也是为什么现有的针对该问题的服务器端解决方案被证明是缓慢、不可靠且成本过高的原因。
那么,如果 NPM 本身不能在浏览器中运行,如果我们从头开始构建一个全新的 NPM 客户端会怎样?
四、解决方案
专为网络构建的更智能、更快速的包管理器
Turbo 的速度和效率在很大程度上是通过利用现代前端应用程序用于快速性能的相同技术来实现的——tree-shaking、延迟加载和使用 gzip 的普通 ol' XHR/fetch。
仅按需检索您需要的文件
Turbo 不是下载整个 tarball,而是智能的,只从 main、typings 和其他相关字段中检索直接需要的文件。这消除了单个包装中惊人的自重,在大型项目中更是如此:
RxJS和RealWorld 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 在连接到无服务器解析器时遇到任何问题,它会优雅地故障转移到完全在浏览器中运行并检索所有必需的元数据以进行解析。
在客户端上进行依赖解析也开辟了一些新的和令人兴奋的可能性,例如一键安装缺少的对等依赖项的能力。
因为没有人会阅读那些 npm 管道进入控制台的警告
证明可以大规模工作
Turbo 现在每月可靠地处理数以千万计的请求,而间接成本可以忽略不计,我们也很高兴地宣布,谷歌的 Angular 团队最近选择了 StackBlitz 来支持数百万开发人员在他们的文档中使用的所有实时示例!
现在在技术预览中
Turbo 已在StackBlitz.com上线,在技术预览阶段,我们将进行大量测试并发布速度、效率和可靠性改进,您的反馈对所有这些都至关重要 — 所以请不要犹豫提交任何文件您遇到的问题或在我们的 Discord 社区中与我们聊天!
虽然 Turbo 最初是为在真实 IDE 中的生产级使用而设计的,但其中的一部分已经进入了一些在线游乐场,我们社区中的人们甚至开始设计一种方法来使script type=module与 Turbo 一起工作(多么酷啊??)。我们迫不及待地想看到人们想出的所有其他令人惊奇的东西,所以一旦我们的 API 流失平稳,我们将在我们的 Github存储库中将所有这些(以及 StackBlitz 的许多其他部分)开源给全世界使用。
五、最后
本文到这里就结束了,有兴趣可以前往官方地址,进行进一步的学习https://github.com/stackblitz/core