標籤:

介紹 Turbo:比 Yarn 和 NPM 快 5 倍,可以在本地瀏覽器中運行

原文地址:Introducing Turbo: 5x faster than Yarn & NPM, and runs natively in-browser ??

原文作者:Eric Simons

譯文出自:掘金翻譯計劃

本文永久鏈接:github.com/xitu/gold-mi

譯者:Cherry

校對者:萌萌、noahziheng

介紹 Turbo:比 Yarn 和 NPM 快 5 倍,可以在本地瀏覽器中運行??

注意 :這是我在 12 月6 日在谷歌山景學校演講的一部分,歡迎加入!

在經過四個月的努力,我很興奮的宣布 Turbo 誕生了!??

Turbo 是一個速度極快的 NPM 客戶端,最初是為 StackBlitz 創建的:

  • 安裝包的速度最少是 Yarn 和 NPM 的五倍 ??
  • ** 將 node_modules 的大小減少到兩個數量級?? **
  • 用於生產級可靠性的多層冗餘 ??
  • 完全在 Web 瀏覽器中工作,能夠擁有閃電般的開發環境 ??

在 StackBlitz.com 中使用 Turbo 安裝 NPM 包的實際速度

為什麼呢?

當我們剛開始開發 StackBlitz 的時候,我們的目標就是創建一個在線的 IDE,這個 IDE 可以讓你感覺和超級跑車的輪子一樣快:你只需要接受瞬間響應命令的喜悅即可。

和 Turbo 不同的是,NPM 和 Yarn 是本地的。因為設計 NPM 和 Yarn 就是用來處理大量依賴後台代碼庫,需要本地二進位或和其他資源。他們的安裝速度就是超級跑車的速度和卡車的速度。但前端代碼很少有這種大規模的依賴,難道這會有什麼問題嗎?當然,這些依賴仍然會作為 devDependencies 和 sub-dependencies 進入安裝流程,並且依舊被下載和引用。將形成那個臭名昭著的黑洞:node_modules

為什麼 NPM 不在本地的瀏覽器中工作,這是問題的關鍵。在 node_modules 文件夾中解析、下載、提取百兆位元組(或千兆位元組)的典型前端項目是一個挑戰,在瀏覽器中並不適合這樣做。此外,這也證明了為什麼這個問題的伺服器端解決方法是 慢、不可靠、並且成本較高的。

所以,如果 NPM 本身不能在瀏覽器端運行,那我們從底層建一個新的 NPM 客戶端會怎麼樣呢?

解決方案:一個專門為 Web 構建的更聰明、更快的包管理器??

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可以大規模使用的證據 ??

Turbo 目前能夠可靠地處理每個月百萬級別的請求數,並且開銷可以忽略不計。我們很興奮的宣布:Google 的 Angular 團隊最近選擇 StackBlitz 來支持他們文檔中的實例,而有數以百萬計的開發人員在使用他們的文檔。

技術預覽 ??

Turbo 是依賴於 StackBlitz.com 的,並且通過技術預覽階段我們將會運行大量的測試和測速,檢驗效能和可靠性的改進,你的每一個反饋都是至關重要的,所以在使用中遇到問題,不假思索的向我們 提 issues 和在我們的 Discord 社區里和我們溝通??

然而 Turbo 最初是為生產級的使用而設計的,但在現實的 IDE(stackblitz)中,Turbo 已經找到了少數的在線應用場所,在社區,人們已經開始設計一種方法,使用 Turbo 使腳本類型與模塊相等(很酷有沒有!!!),我們迫不及待地想看到人們提出的其他驚人的東西,所以,一旦我們的 API 更加完善,我們會將其在我們的 Github 中完全開源(和 StackBlitz 的其他部分一起)以供全世界人們使用 ??。

最後,我們非常感謝 Google 的 Angular 團隊在我們的技術下的賭注,同時感謝 Google Cloud 團隊將他們令人驚嘆的服務贊助給 Turbo 使用!??

一如既往,請隨時通過 Tweet 聯繫我

有任何的疑問、反饋、想法等等都可以通過 @ericsimons40 或者 @stackblitz 聯繫我 :)

另外,如果你有興趣支持我們的工作,請考慮訂閱 Thinkster Pro!我們正在創建一個新系列關於我們是如何創建 Turbo 和 StackBlitz 的,以及修改我們的目錄:)

我希望你們能看下我 12 月 6 日在 Mountain View 的視頻。


掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區,文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域,想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

推薦閱讀:

稀土掘金日報(第廿壹期)
2017 年掘金答謝趴,發布的吉祥物居然是這個!
寫在「掘金翻譯計劃」GitHub Star 破千的一天
掘金秋招徵文大賽

TAG:稀土掘金 |