2022 年夏天，我的隊友 Kailan 為 Fastly Compute 開發了 Rust 箱，實現了 Edge Side Includes (ESI) 模板語言的子集，並發表了一篇關於它。這篇文章很重要，不僅因為我們發布了一個有用的庫，還因為它很好地說明了計算可以為我們帶來什麼：具有模組化功能的可編程邊緣。現在 JavaScript 在 Compute 上普遍可用已有一年多了，我們是時候為 JavaScript 用戶提供類似的解決方案了。 Fastly 的 JavaScript ESI 程式庫現已在 npm 上提供，讓您可以為應用程式添加強大的 ESI 處理。
近十年來，Fastly 的 CDN 一直支援 Edge Side Includes (ESI)，這是一種模板語言，透過解釋 HTML 原始碼中的特殊標籤來運作。它圍繞著標籤
index.html
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
header.html
<header>Welcome to the web site</header>
輸出
<header>Welcome to the web site</header>Content
當計算進入場景時，邊緣景觀主要在兩個方面發生了變化：可編程性和模組化。
在我們對 Rust 的平台支援穩定後不久，我們發布了一個實現 ESI 的 Rust 包，並添加了可編程性。現在您可以使用程式碼配置如何建立其他後端請求以及如何處理回應片段。您甚至可以對並非來自後端伺服器的文件執行 ESI 處理。這種可編程性將其與我們在 VCL 中提供的 ESI 支援區分開來，後者僅限於我們提供的固定功能集。
同時，這種方法是高度模組化的，使程式設計師可以選擇在每個請求的基礎上執行此ESI 處理，並可以選擇將處理與使用相容資料類型的其他模組結合起來，並應用它們按照指定的任何順序和/或邏輯條件。
與我們的 Rust 版本類似，我們希望這個 JavaScript 函式庫是可程式化的。 Fastly 的 JavaScript 支援始終包含 Fetch API 及其配套的 Streams API。 Streams API 的一個實用功能是 TransformStream 接口，它允許透過物件「輸送」資料以應用轉換，這對於 ESI 來說是完美的。透過將 ESI 處理器實現為 TransformStream 的實現，我們能夠將其直接放入用 JavaScript 編寫的快速計算應用程式中。
您可以透過以下方式進行串流：
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
我們將其稱為 EsiTransformStream 的轉換直接應用於流，從而減輕了記憶體和效能問題。這意味著：
此外，這種設計是模組化的，使 EsiTransformStream 成為您可以與其他東西一起使用的另一個工具。例如，您可能希望對回應套用其他轉換（例如壓縮），並且可以透過任意數量的這些轉換流傳送回應，因為它是完全標準的介面。 如果您願意，您甚至可以有條件地僅針對某些請求或回應啟用 ESI，例如透過請求標頭、路徑或回應內容類型。
以下是實例化 EsiTransformStream 的方法：
<header>Welcome to the web site</header>
建構子接受一個 URL 和一個 Headers 對象，並且可以選擇接受一些選項作為第三個參數。如前所述，ESI 的主要功能是下載附加模板，以包含到結果流中。遇到
在最簡單的情況下，您將僅使用配置物件的取得值。如果您不提供它，那麼它會使用全域獲取函數，但在計算中，您將需要它來指定一個後端，以供在包含模板時使用的獲取（除非您使用動態後端功能）。上面的範例片段在呼叫全域取得之前分配名為 origin_0 的後端。
就是這樣！透過這個簡單的設置，您可以擁有一個服務 ESI 標籤的後端和一個處理它們的計算應用程式。這是您可以運行的完整範例：
此實作提供了比我們過去提供的其他功能更多的 ESI 功能。
有時，
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
如果 /templates/header.html 導致錯誤，ESI 處理器會默默地忽略該錯誤並替換整個
也可以透過使用
<header>Welcome to the web site</header>
ESI 處理器首先執行
要注意的是，整個
ESI 還允許透過對變數執行運行時檢查來進行條件執行。以下是此類檢查的範例：
<header>Welcome to the web site</header>Content
當處理器遇到
處理器提供一組有限的變量，這些變量主要基於請求 cookie。在上面的範例中，檢查名為「group」的 HTTP cookie 的值。我們的實作是基於ESI語言規範；請參閱它以了解更多詳細資訊。
此實作支援 ESI 語言規範的以下標籤。
ESI 標籤的屬性支援 ESI 變量，
雖然功能集足以令人興奮，但可編程的真正令人興奮的部分是更多的事情是可能的。引入模板是 ESI 的主要用途，但這絕不是它能做的全部。這是一個例子。
假設您在文件中標記了一個時間戳，您希望在顯示時將其表示為相對日期，例如「2 天前」。執行此操作的方法有很多，但為了獲得最佳性能和記憶體影響，最好在流中執行查找/替換。對此 ESI 庫進行程式設計實際上可以作為實現此目的的一個不錯的選擇。
我們可以使用特製的 ESI 標籤定義要在後端文件中編碼的時間戳，格式如下：
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
例如，此程式碼片段可以代表太平洋時間 2024 年 1 月 1 日午夜：
<header>Welcome to the web site</header>
現在，設定 EsiTransformStream 以在看到該 URL 模式時提供合成替換文件：
<header>Welcome to the web site</header>Content
現在，當處理器遇到上面的範例片段時，它將發出類似於以下內容的結果（取決於您未來運行它的天數）：
const transformedBody = resp.body.pipeThrough(esiTransformStream);
return new Response(
transformedBody,
{
status: resp.status,
headers: resp.headers,
},
);
由於後端文件可透過 Fastly 進行緩存，因此未來的請求可以從快取 HIT 中受益，同時處理將繼續顯示更新的相對時間。
有關此範例的實例，請查看以下小提琴：
@fastly/esi 現已在 npm 上提供，可新增至任何 JavaScript 程式。當然，在 Fastly Compute 程式的邊緣使用它，但事實上，只要您的環境支援 fetch API，它甚至可以在 Compute 之外工作。完整的源代碼可在 GitHub 上取得。
甚至在建立 Fastly 帳戶之前，就可以開始複製上面的任何一個 Fiddle，並用您自己的來源測試它們。當您準備好在我們的全球網路上發布服務時，您可以註冊 Compute 的免費試用版，然後立即開始使用 npm 上的 ESI 庫。
透過計算，邊緣是可編程和模組化的 - 選擇並組合最適合您的解決方案，甚至構建您自己的解決方案。我們並不是唯一能夠為計算提供此類模組的公司。任何人都可以為生態系統做出貢獻並從中受益。而且，一如既往，在 Fastly 社群論壇上與我們見面，讓我們知道您一直在建立什麼！
以上是模組化邊緣端包含 JavaScript 運算元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
