- 原文地址: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、前端、後端、區塊鏈、產品、設計、人工智能等領域,想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。