介紹 Turbo：比 Yarn 和 NPM 快 5 倍，可以在本地瀏覽器中執行

sunshine小小倩發表於2019-03-03
YarnNPM瀏覽器

介紹 Turbo：比 Yarn 和 NPM 快 5 倍，可以在本地瀏覽器中執行?

介紹 Turbo：比 Yarn 和 NPM 快 5 倍，可以在本地瀏覽器中執行

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

在經過四個月的努力，我很興奮的宣佈 Turbo 誕生了！?

Turbo 是一個速度極快的 NPM 客戶端，最初是為 StackBlitz 建立的：

  • 安裝包的速度最少是 Yarn 和 NPM 的五倍 ?

  • ** 將 node_modules 的大小減少到兩個數量級? **

  • 用於生產級可靠性的多層冗餘 ?

  • 完全在 Web 瀏覽器中工作，能夠擁有閃電般的開發環境 ⚡️

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

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

為什麼呢？

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

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

Dank, relevant meme

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

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

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

Turbo 的速度和效率大部分是通過利用與現代前端應用程式相同的技術來完成的，他們使用了 snappy performance—tree-shaking、懶載入和啟用了 gzip 壓縮的普通 XHR/fetch 請求。

按需檢索檔案 ?

Turbo 很巧妙的只檢索 main、typings、和其他相關檔案需要的檔案而不是下載整個壓縮包。無論是個人專案還是大型專案，這都減輕了驚人的負載。

RxJS 和 RealWorld Angular 總有效載荷大小的比較

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 在連線無伺服器版本的解析器時有任何的問題，即便失敗的時候也可以優雅的在瀏覽器中完整執行並且保留所有用於解決問題所必需的後設資料。

在客戶端完成依賴管理也會帶來一些新的令人興奮的可能性，比如只需單擊一次就可以安裝缺少的對等依賴關係 ?:

介紹 Turbo：比 Yarn 和 NPM 快 5 倍，可以在本地瀏覽器中執行

因為沒有人讀這些 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章