模組化邊緣端包含 JavaScript 運算元件
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 處理，並可以選擇將處理與使用相容資料類型的其他模組結合起來，並應用它們按照指定的任何順序和/或邏輯條件。
下一個目標：JavaScript
與我們的 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 的轉換直接應用於流，從而減輕了記憶體和效能問題。這意味著：
- 在應用轉換之前無需緩衝整個上游響應。
- 變壓器會盡快消耗上游響應，並處理流程中顯示的 ESI 標籤。當轉換器完成處理每個 ESI 標籤時，結果會立即發佈到下游，因此我們能夠保留盡可能小的緩衝區。這允許客戶端在準備就緒時接收串流結果的第一個字節，而不必等待它被完全處理。
此外，這種設計是模組化的，使 EsiTransformStream 成為您可以與其他東西一起使用的另一個工具。例如，您可能希望對回應套用其他轉換（例如壓縮），並且可以透過任意數量的這些轉換流傳送回應，因為它是完全標準的介面。 如果您願意，您甚至可以有條件地僅針對某些請求或回應啟用 ESI，例如透過請求標頭、路徑或回應內容類型。
以下是實例化 EsiTransformStream 的方法：
<header>Welcome to the web site</header>
建構子接受一個 URL 和一個 Headers 對象，並且可以選擇接受一些選項作為第三個參數。如前所述，ESI 的主要功能是下載附加模板，以包含到結果流中。遇到
- URL用於解析
的src中的相對路徑標籤。 - 在發出額外請求來取得範本時使用標頭。
- 可選的配置物件可用於覆寫所進行的獲取的行為，並應用其他自訂行為，例如如何處理取得的範本以及自訂錯誤處理。
在最簡單的情況下，您將僅使用配置物件的取得值。如果您不提供它，那麼它會使用全域獲取函數，但在計算中，您將需要它來指定一個後端，以供在包含模板時使用的獲取（除非您使用動態後端功能）。上面的範例片段在呼叫全域取得之前分配名為 origin_0 的後端。
就是這樣！透過這個簡單的設置，您可以擁有一個服務 ESI 標籤的後端和一個處理它們的計算應用程式。這是您可以運行的完整範例：
支援 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:刪除
- esi：試試 / esi：試試 / esi：例外
- ESI:選擇 / ESI:何時 / ESI:否則
- esi:vars
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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
JavaScript：探索網絡語言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
如何使用Next.js（前端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:22 AM
本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
如何安裝JavaScript？
Apr 05, 2025 am 12:16 AM
JavaScript不需要安裝，因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中，通過標籤嵌入HTML文件中運行。 2)在Node.js環境中，下載並安裝Node.js後，通過命令行運行JavaScript文件。
