- 原文地址:Introducing Turbo: 5x faster than Yarn & NPM, and runs natively in-browser 🔥
- 原文做者:Eric Simons
- 译文出自:掘金翻译计划
- 本文永久连接:github.com/xitu/gold-m…
- 译者:Cherry
- 校对者:萌萌、noahziheng
注意 :这是我在 12 月6 日在谷歌山景学校演讲的一部分,欢迎加入!css
在通过四个月的努力,我很兴奋的宣布 Turbo 诞生了!🎉前端
Turbo 是一个速度极快的 NPM 客户端,最初是为 StackBlitz 建立的:node
安装包的速度最少是 Yarn 和 NPM 的五倍 🔥react
** 将 node_modules
的大小减小到两个数量级😮 **android
用于生产级可靠性的多层冗余 💪ios
彻底在 Web 浏览器中工做,可以拥有闪电般的开发环境 ⚡️git
在 StackBlitz.com 中使用 Turbo 安装 NPM 包的实际速度github
当咱们刚开始开发 StackBlitz 的时候,咱们的目标就是建立一个在线的 IDE,这个 IDE 可让你感受和超级跑车的轮子同样快:你只须要接受瞬间响应命令的喜悦便可。web
和 Turbo 不一样的是,NPM 和 Yarn 是本地的。由于设计 NPM 和 Yarn 就是用来处理大量依赖后台代码库,须要本地二进制或和其余资源。他们的安装速度就是超级跑车的速度和卡车的速度。但前端代码不多有这种大规模的依赖,难道这会有什么问题吗?固然,这些依赖仍然会做为 devDependencies 和 sub-dependencies 进入安装流程,而且依旧被下载和引用。将造成那个臭名昭著的黑洞:node_modules
。算法
为何 NPM 不在本地的浏览器中工做,这是问题的关键。在 node_modules
文件夹中解析、下载、提取百兆字节(或千兆字节)的典型前端项目是一个挑战,在浏览器中并不适合这样作。此外,这也证实了为何这个问题的服务器端解决方法是 慢、不可靠、而且成本较高的。
因此,若是 NPM 自己不能在浏览器端运行,那咱们从底层建一个新的 NPM 客户端会怎么样呢?
Turbo 的速度和效率大部分是经过利用与现代前端应用程序相同的技术来完成的,他们使用了 snappy performance—tree-shaking、懒加载和启用了 gzip 压缩的普通 XHR/fetch 请求。
Turbo 很巧妙的只检索 main、typings、和其余相关文件须要的文件而不是下载整个压缩包。不管是我的项目仍是大型项目,这都减轻了惊人的负载。
RxJS 和 RealWorld Angular 总有效载荷大小的比较
那么若是你的重要文件并无被主文件引用会怎么样呢?例如一个 Sass 文件 ,不用担忧,Turb 按需进行懒加载而且一直保存以便未来使用,这个和微软新推出的 GVFS Git protocol 工做原理有些相似。
咱们最近推出了一个具备 Turbo 特征的 CDN,全部的 NPM 包都在一个使用 gzip 打包的 JSON 请求中,大大提升了包安装的速度。这个概念相似于 npm 的 tarball,它合并了全部的文件而且压缩他们。然而,Turbo 的缓存智能的只包含你项目须要的文件并压缩他们。
每个 Turbo 的客户端都是在浏览器中独立运行的,而且若是你引用的包文件在咱们的缓存中,那么会直接从 jsDelivr 提供的大量的 CDN 资源 中自动按需下载。若是 jsDelivr 访问不了了怎么办?不要担忧,会自动替换成 Unpkg CDN,提供三层超可靠的独立的包安装工具👌。
为了确保最小的有效负载大小,Turbo 使用一个定制的解析算法,在可能的状况下积极解决通用包版本。这也是出奇的快和冗余:无服务版本的解析器有权使用 NPM 在内存中的整个数据集而且在 85ms 内解析任何 package.json 文件。Turbo 在链接无服务器版本的解析器时有任何的问题,即使失败的时候也能够优雅的在浏览器中完整运行而且保留全部用于解决问题所必需的元数据。
在客户端完成依赖管理也会带来一些新的使人兴奋的可能性,好比只需单击一次就能够安装缺乏的对等依赖关系 😮:
由于没有人读这些 NPM 在控制台输出的警告 😜
Turbo 目前可以可靠地处理每月百万级别的请求数,而且开销能够忽略不计。咱们很兴奋的宣布:Google 的 Angular 团队最近选择 StackBlitz 来支持他们文档中的实例,而有数以百万计的开发人员在使用他们的文档。
Turbo 是依赖于 StackBlitz.com 的,而且经过技术预览阶段咱们将会运行大量的测试和测速,检验效能和可靠性的改进,你的每个反馈都是相当重要的,因此在使用中遇到问题,不假思索的向咱们 提 issues 和在咱们的 Discord 社区里和咱们沟通🍻
然而 Turbo 最初是为生产级的使用而设计的,但在现实的 IDE(stackblitz)中,Turbo 已经找到了少数的在线应用场所,在社区,人们已经开始设计一种方法,使用 Turbo 使脚本类型与模块相等(很酷有没有!!!),咱们火烧眉毛地想看到人们提出的其余惊人的东西,因此,一旦咱们的 API 更加完善,咱们会将其在咱们的 Github 中彻底开源(和 StackBlitz 的其余部分一块儿)以供全世界人们使用 🤘。
最后,咱们很是感谢 Google 的 Angular 团队在咱们的技术下的赌注,同时感谢 Google Cloud 团队将他们使人惊叹的服务赞助给 Turbo 使用!❤️
有任何的疑问、反馈、想法等等均可以经过 @ericsimons40 或者 @stackblitz 联系我 :)
另外,若是你有兴趣支持咱们的工做,请考虑订阅 Thinkster Pro!咱们正在建立一个新系列关于咱们是如何建立 Turbo 和 StackBlitz 的,以及修改咱们的目录:)
我但愿大家能看下我 12 月 6 日在 Mountain View 的视频。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。