React Router v7 已發布。 查看文件
效能
本頁內容

效能

本文檔為草稿,我們將很快加入更多實用資訊,但我們想儘早傳達我們的方法。

Remix 的設計理念是鼓勵您利用分散式運算的效能特性,而不是像 SSG 那樣規定一種精確的架構及其所有限制。

當然,傳送給使用者最快的方式是 CDN 上靠近使用者的靜態文件。直到最近,伺服器幾乎都只在全球的一個地區運作,這導致其他地方的回應速度很慢。這或許是 SSG 如此受歡迎的原因之一,它允許開發人員將其資料「快取」到 HTML 文件中,然後將其分發到世界各地。它也帶來了很多權衡:建置時間、建置複雜度、翻譯的重複網站、無法用於經過身份驗證的使用者體驗、無法用於非常龐大且動態的資料來源(例如我們的專案 unpkg.com!),僅舉幾例。

邊緣運算

(不,不是 U2 的那個傢伙。)

今天,「邊緣」的分散式運算方面有很多令人興奮的事情正在發生。「邊緣運算」通常是指在靠近使用者的伺服器上執行程式碼,而不僅僅是在一個地方(例如美國東海岸)。我們不僅看到越來越多這種情況,而且也看到分散式資料庫正在轉向邊緣。我們已經預期這一切一段時間了,這就是為什麼 Remix 的設計方式如此。

隨著分散式伺服器和資料庫在邊緣運作,現在可以以與靜態文件相當的速度提供動態內容。您可以讓您的伺服器快速運作,但您對使用者的網路無能為力。唯一剩下的事情就是將程式碼從您的瀏覽器套件移到伺服器上,減少在網路上傳送的位元組,並提供無與倫比的網路效能。這就是 Remix 的設計目標。

本網站 + Fly.io

這個網站的首位元組時間非常難以超越。對於世界上大多數人來說,它都在 100 毫秒以下。我們可以修復文件中的錯字,在一兩分鐘內,網站就會在全球範圍內更新,而無需重建、無需重新部署,也無需 HTTP 快取。

我們使用分散式系統完成了此操作。該應用程式在 Fly 上全球多個區域執行,因此它離您很近。每個執行個體都有自己的 SQLite 資料庫。當應用程式啟動時,它會從 GitHub 上的 Remix 原始程式碼儲存庫中提取 tarball,將 markdown 文件處理為 HTML,然後將其插入 SQLite 資料庫。

所涉及的程式碼實際上與 Gatsby 網站在 gatsby-node.js 或 Next.js 中的 getStaticProps 中於建置時所做的非常相似。其想法是取得緩慢的部分(從 GitHub 提取文件、處理 markdown)並快取它(SSG 快取到 HTML,本網站快取到伺服器上的 SQLite)。

當使用者請求頁面時,應用程式會查詢其本機 SQLite 資料庫並傳送頁面。我們的伺服器在幾毫秒內即可完成這些請求。這個架構最有趣的是,我們不必為了新鮮度而犧牲速度。當我們在 GitHub 上編輯文件時,GitHub 動作會在最近的應用程式執行個體上呼叫 Webhook,然後將該請求重播到全球所有其他執行個體。然後,它們都會從 GitHub 中提取新的 tarball,並像啟動時一樣將其資料庫與文件同步。文件會在全球範圍內在一兩分鐘內更新。

但這只是我們想探索的一種方法。

Cloudflare Workers

Remix Cloudflare Workers 示範

Cloudflare 一直在推動邊緣運算的界限,而 Remix 的定位就是充分利用這一點。你可以看到我們展示的範例回應時間與提供靜態檔案相同,但它所展示的功能絕非靜態!

Cloudflare 不僅讓應用程式在靠近使用者的地方運行,他們還擁有像 KVDurable Objects 這樣的持久儲存系統,可以在不將資料耦合到部署以及客製化的增量建構後端的情況下,實現 SSG 等級的速度。

我們計劃在不久的將來支援其他類似的平台。

套件分析

本文件僅在使用 傳統 Remix 編譯器 時適用

Remix 會將中繼檔案輸出到伺服器建置目錄 (預設為 build/),以便您可以分析套件大小和組成。

  • metafile.css.json:CSS 套件的中繼檔案
  • metafile.js.json:瀏覽器 JS 套件的中繼檔案
  • metafile.server.json:伺服器 JS 套件的中繼檔案

Remix 使用 esbuild 的中繼檔案格式,因此您可以將這些檔案直接上傳到 https://esbuild.dev.org.tw/analyze/ 來視覺化您的套件。

其他技術

以下是一些可以幫助加速伺服器的其他技術

  • FaunaDB - 一個在靠近您的使用者的地方運行的分散式資料庫
  • LRU Cache - 一個當空間滿時會自動清除更多空間的記憶體快取
  • Redis - 一個經過驗證可靠的伺服器端快取
文件和範例授權於 MIT