Eine modulare Edge Side Includes-Komponente für JavaScript Compute
Im Sommer 2022 arbeitete mein Teamkollege Kailan an einer Rust-Kiste für Fastly Compute, implementierte eine Teilmenge der Edge Side Includes (ESI)-Vorlagensprache und veröffentlichte einen Blogbeitrag darüber Es. Dieser Artikel war nicht nur deshalb von Bedeutung, weil wir eine nützliche Bibliothek veröffentlicht haben, sondern auch, weil er ein brillantes Beispiel dafür war, was Compute uns bieten kann: einen programmierbaren Edge mit modularer Funktionalität. Und da JavaScript nun seit mehr als einem Jahr allgemein auf Compute verfügbar ist, war es an der Zeit, dass wir eine ähnliche Lösung für unsere JavaScript-Benutzer haben. Mit der ESI-Bibliothek für JavaScript von Fastly, die jetzt auf npm verfügbar ist, können Sie Ihrer Anwendung leistungsstarke ESI-Verarbeitung hinzufügen.
Programmierbarkeit und Modularität
Seit fast einem Jahrzehnt unterstützt das CDN von Fastly Edge Side Includes (ESI), eine Vorlagensprache, die durch die Interpretation spezieller Tags in Ihrer HTML-Quelle funktioniert. Es dreht sich um das Tag
index.html
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
header.html
<header>Welcome to the web site</header>
Ausgabe
<header>Welcome to the web site</header>Content
Als Compute auf den Markt kam, veränderte sich die Edge-Landschaft hauptsächlich auf zwei Arten: Programmierbarkeit und Modularität.
Kurz nachdem sich unsere Plattformunterstützung für Rust stabilisiert hatte, veröffentlichten wir eine Kiste für Rust, die ESI implementierte und Programmierbarkeit hinzufügte. Sie können jetzt mithilfe von Code konfigurieren, wie zusätzliche Backend-Anfragen erstellt und Antwortfragmente verarbeitet werden. Sie können die ESI-Verarbeitung sogar für Dokumente durchführen, die nicht vom Backend-Server stammen. Diese Programmierbarkeit unterschied es von der ESI-Unterstützung, die wir in VCL haben, die auf die von uns angebotenen festen Funktionen beschränkt war.
Gleichzeitig war dieser Ansatz hochgradig modular und gab dem Programmierer die Möglichkeit, diese ESI-Verarbeitung auf Anfragebasis durchzuführen, und die Möglichkeit, die Verarbeitung mit anderen Modulen zu kombinieren, die mit kompatiblen Datentypen arbeiten und anwenden sie in beliebiger Reihenfolge und/oder logischer Bedingung.
Nächstes Ziel: JavaScript
Ähnlich wie bei unserer Rust-Version wollten wir, dass diese JavaScript-Bibliothek programmierbar ist. Die JavaScript-Unterstützung von Fastly umfasst seit jeher die Fetch-API und die dazugehörige Streams-API. Eine nützliche Funktion der Streams-API ist die TransformStream-Schnittstelle, die es ermöglicht, Daten durch ein Objekt zu „leiten“, um eine Transformation anzuwenden – perfekt für ESI. Durch die Implementierung des ESI-Prozessors als Implementierung von TransformStream konnten wir ihn direkt in eine in JavaScript geschriebene Fastly Compute-Anwendung integrieren.
So können Sie es streamen:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Die Transformation, die wir EsiTransformStream nennen, wird direkt auf den Stream angewendet, wodurch Speicher- und Leistungsprobleme entfallen. Das bedeutet:
- Es ist nicht erforderlich, die gesamte Upstream-Antwort zu puffern, bevor die Transformation angewendet wird.
- Der Transformer verbraucht die Upstream-Antwort so schnell wie möglich und verarbeitet ESI-Tags, sobald sie im Stream angezeigt werden. Sobald der Transformator die Verarbeitung jedes ESI-Tags abgeschlossen hat, werden die Ergebnisse sofort nachgelagert freigegeben, sodass wir den kleinstmöglichen Puffer vorhalten können. Dadurch kann der Client das erste Byte des gestreamten Ergebnisses empfangen, sobald es bereit ist, ohne auf die vollständige Verarbeitung warten zu müssen.
Darüber hinaus ist dieses Design modular, sodass EsiTransformStream zu einem weiteren Tool wird, das Sie neben anderen Dingen verwenden können. Beispielsweise möchten Sie möglicherweise andere Transformationen wie Komprimierung auf Antworten anwenden, und eine Antwort kann durch eine beliebige Anzahl dieser Transformationsströme geleitet werden, da es sich um eine vollständig standardmäßige Schnittstelle handelt. Wenn Sie möchten, können Sie ESI sogar nur für bestimmte Anfragen oder Antworten bedingt aktivieren, z. B. nach Anfrageheadern, Pfaden oder Antwortinhaltstyp.
So instanziieren Sie EsiTransformStream:
<header>Welcome to the web site</header>
Der Konstruktor akzeptiert eine URL und ein Headers-Objekt und optional einige Optionen als dritten Parameter. Wie bereits beschrieben, besteht die Hauptfunktion von ESI darin, zusätzliche Vorlagen herunterzuladen, um sie in den resultierenden Stream einzubinden. Begegnung mit einem
- Die URL wird verwendet, um relative Pfade im Quellcode von
- Die Header werden verwendet, wenn zusätzliche Anfragen zum Abrufen der Vorlagen gestellt werden.
- Das optionale Konfigurationsobjekt kann verwendet werden, um das Verhalten des durchgeführten Abrufs zu überschreiben und um anderes benutzerdefiniertes Verhalten anzuwenden, z. B. die Art und Weise, wie die abgerufene Vorlage verarbeitet wird, und eine benutzerdefinierte Fehlerbehandlung.
Im einfachsten Fall verwenden Sie nur den Abrufwert des Konfigurationsobjekts. Wenn Sie es nicht bereitstellen, wird stattdessen die globale Abruffunktion verwendet. In Compute benötigen Sie es jedoch, um ein Backend für den Abruf anzugeben, das beim Einbinden einer Vorlage verwendet werden soll (es sei denn, Sie verwenden die dynamische Backend-Funktion). Der obige Beispielausschnitt weist das Backend mit dem Namen origin_0 zu, bevor der globale Abruf aufgerufen wird.
Das ist es! Mit diesem einfachen Setup können Sie ein Backend einrichten, das ESI-Tags bereitstellt, und eine Compute-Anwendung, die diese verarbeitet. Hier ist ein vollständiges Beispiel, das Sie ausführen können:
Unterstützung für ESI-Funktionen
Diese Implementierung bietet mehr ESI-Funktionen als andere, die wir in der Vergangenheit zur Verfügung gestellt haben.
Fehlerbehandlung
Manchmal wird eine Datei, auf die von einem
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Wenn /templates/header.html einen Fehler verursacht, ignoriert der ESI-Prozessor den Fehler stillschweigend und ersetzt das gesamte
Es ist auch möglich, eine strukturiertere Fehlerbehandlung zu verwenden, indem ein
<header>Welcome to the web site</header>
Der ESI-Prozessor führt zunächst den Inhalt von
Es ist wichtig zu beachten, dass das gesamte
Bedingungen
ESI ermöglicht auch die bedingte Ausführung, indem es Laufzeitprüfungen für Variablen durchführt. Das Folgende ist ein Beispiel für eine solche Prüfung:
<header>Welcome to the web site</header>Content
Wenn der Prozessor auf ein
Der Prozessor stellt einen begrenzten Satz an Variablen zur Verfügung, die hauptsächlich auf Anfragecookies basieren. Im obigen Beispiel wird ein HTTP-Cookie mit dem Namen „group“ auf seinen Wert überprüft. Unsere Implementierung basiert auf der ESI-Sprachspezifikation; Weitere Informationen finden Sie hier.
Liste der unterstützten Tags und Funktionen
Diese Implementierung unterstützt die folgenden Tags der ESI-Sprachspezifikation.
- esi:include
- esi:comment
- esi:remove
- esi:try / esi:attempt / esi:exclusive
- esi:choose / esi:when / esi:otherwise
- esi:vars
Das
ESI-Variablen werden in den Attributen von ESI-Tags unterstützt und ESI-Ausdrücke werden im Testattribut von
Individuelles Verhalten bedeutet endlose Möglichkeiten
Während der Funktionsumfang ausreicht, um begeistert zu sein, ist das wirklich Spannende an der Programmierbarkeit, dass noch mehr Dinge möglich sind. Das Einbinden von Vorlagen ist die Hauptanwendung von ESI, aber das ist bei weitem nicht alles, was es kann. Hier ist ein Beispiel.
Bedenken Sie, dass in Ihrem Dokument ein Zeitstempel markiert ist, der bei der Anzeige als relatives Datum dargestellt werden soll, z. B. „vor 2 Tagen“. Es gibt viele Möglichkeiten, dies zu tun, aber um die besten Auswirkungen auf Leistung und Speicher zu erzielen, wäre es großartig, ein Suchen/Ersetzen in Streams durchzuführen. Die Programmierung dieser ESI-Bibliothek kann hierfür tatsächlich eine gute Option sein.
Wir können Zeitstempel definieren, die in Ihrem Backend-Dokument kodiert werden sollen, indem wir ein speziell gestaltetes ESI-Tag in einem Format wie dem folgenden verwenden:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Dieses Snippet kann beispielsweise Mitternacht am 1. Januar 2024 (Pazifikzeit) darstellen:
<header>Welcome to the web site</header>
Richten Sie nun den EsiTransformStream so ein, dass ein synthetisches Ersatzdokument bereitgestellt wird, wann immer er dieses URL-Muster sieht:
<header>Welcome to the web site</header>Content
Wenn der Prozessor nun auf den obigen Beispielausschnitt stößt, gibt er ein Ergebnis ähnlich dem folgenden aus (abhängig davon, wie viele Tage in der Zukunft Sie es ausführen):
const transformedBody = resp.body.pipeThrough(esiTransformStream);
return new Response(
transformedBody,
{
status: resp.status,
headers: resp.headers,
},
);
Da das Backend-Dokument von Fastly zwischengespeichert werden kann, können zukünftige Anfragen von einem Cache-HIT profitieren, während bei der Verarbeitung weiterhin die aktualisierte relative Zeit angezeigt wird.
Ein Live-Beispiel hierfür finden Sie in der folgenden Geige:
Machen Sie eine Spritztour!
@fastly/esi ist jetzt auf npm verfügbar und kann zu jedem JavaScript-Programm hinzugefügt werden. Verwenden Sie es natürlich am Edge in Ihren Fastly Compute-Programmen, aber tatsächlich funktioniert es auch außerhalb von Compute, solange Ihre Umgebung die Fetch-API unterstützt. Der vollständige Quellcode ist auf GitHub verfügbar.
Klonen Sie zunächst eine der oben genannten Fiddles und testen Sie sie mit Ihren eigenen Ursprüngen, noch bevor Sie ein Fastly-Konto erstellt haben. Wenn Sie bereit sind, Ihren Dienst in unserem globalen Netzwerk zu veröffentlichen, können Sie sich für eine kostenlose Testversion von Compute anmelden und dann sofort mit der ESI-Bibliothek auf npm loslegen.
Mit Compute ist der Vorsprung programmierbar und modular – wählen und kombinieren Sie die Lösungen, die für Sie am besten funktionieren, oder erstellen Sie sogar Ihre eigenen. Wir sind nicht die Einzigen, die solche Module für Compute bereitstellen können. Jeder kann zum Ökosystem beitragen und davon profitieren. Und wie immer treffen Sie uns im Fastly-Community-Forum und teilen Sie uns mit, was Sie erstellt haben!
Das obige ist der detaillierte Inhalt vonEine modulare Edge Side Includes-Komponente für JavaScript Compute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1670
14
1428
52
1329
25
1276
29
1256
24
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit
Apr 16, 2025 am 12:12 AM
Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.
Von C/C nach JavaScript: Wie alles funktioniert
Apr 14, 2025 am 12:05 AM
Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.
JavaScript und das Web: Kernfunktionalität und Anwendungsfälle
Apr 18, 2025 am 12:19 AM
Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
JavaScript in Aktion: Beispiele und Projekte in realer Welt
Apr 19, 2025 am 12:13 AM
Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
Verständnis der JavaScript -Engine: Implementierungsdetails
Apr 17, 2025 am 12:05 AM
Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.
Python gegen JavaScript: Community, Bibliotheken und Ressourcen
Apr 15, 2025 am 12:16 AM
Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.
Python vs. JavaScript: Entwicklungsumgebungen und Tools
Apr 26, 2025 am 12:09 AM
Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
Die Rolle von C/C bei JavaScript -Dolmetschern und Compilern
Apr 20, 2025 am 12:01 AM
C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.
