Content Delivery Networks (CDNs) ermöglichen es Ihnen, die Auslieferung der statischen Ressourcen Ihrer Website zu verbessern, insbesondere durch CDN-Caching. Sie tun dies, indem sie Ihre Inhalte von Edge-Standorten aus bereitstellen, die auf der ganzen Welt verteilt sind. Wenn ein Benutzer Ihre Website besucht und Ihre Website Ressourcen vom CDN anfordert, leitet das CDN diese Anfrage an den nächstgelegenen Edge-Standort weiter. Wenn dieser Standort die angeforderten Ressourcen entweder vom vorherigen Besuch dieses Benutzers oder von einer anderen Person hat, werden die Inhalte aus dem Cache geliefert. Andernfalls fordert das CDN den Inhalt von Ihrer zugrunde liegenden Domain an, speichert ihn im Cache und liefert ihn aus.
Es gibt unzählige CDNs, aber für diesen Beitrag werden wir AWS CloudFront verwenden. Wir werden die Einrichtung einer CloudFront-Distribution zum Bereitstellen aller Assets unserer Website untersuchen: JavaScript-Dateien, CSS-Dateien, Schriftdateien usw. Dann werden wir sehen, wie wir sie in einen Vite-Build integrieren können. Wenn Sie mehr über Vite erfahren möchten, finden Sie hier eine Einführung.
Einrichten einer CloudFront-CDN-Distribution
Lassen Sie uns direkt einsteigen und unsere CloudFront-CDN-Distribution einrichten.
Für jedes ernsthafte Projekt sollten Sie Ihre serverlose Infrastruktur mit Code einrichten, z. B. mit dem Serverless Framework oder dem CDK von AWS. Um es hier einfach zu halten, richten wir unser CDN über die AWS-Konsole ein.
Gehen Sie zur CloudFront-Homepage. Oben rechts sollten Sie einen orangefarbenen Button zum Erstellen einer neuen Distribution sehen.
Der Erstellungsbildschirm bietet viele Optionen, aber größtenteils sind die Standardauswahlen in Ordnung. Fügen Sie zuallererst die Domain hinzu, auf der sich Ihre Ressourcen befinden.
Scrollen Sie als Nächstes nach unten zum Dropdown-Menü Response headers policy und wählen Sie "CORS-With-Preflight".
Klicken Sie schließlich unten auf die Schaltfläche Create Distribution, und hoffentlich sehen Sie Ihre neue Distribution.
Integration des CDN mit Vite
Es ist eine Sache, dass unser CDN eingerichtet ist und bereit ist, unsere Dateien bereitzustellen. Aber es ist eine andere Sache, dass unsere Website tatsächlich weiß, wie sie sie von unserem CDN anfordern soll. Ich werde die Integration mit Vite durchgehen, aber andere Build-Systeme wie webpack oder Rollup werden ähnlich sein.
Wenn Vite unsere Website erstellt, pflegt es einen "Graphen" aller JavaScript- und CSS-Dateien, die verschiedene Teile unserer Website importieren, und fügt die entsprechenden <script>-Tags, <link>-Tags oder import()-Anweisungen ein, um das Notwendige zu laden. Was wir tun müssen, ist, Vite anzuweisen, diese Assets in der Produktion von unserem CDN anzufordern. Sehen wir mal, wie.
Öffnen Sie Ihre Datei vite.config.ts. Zuerst müssen wir wissen, ob wir uns auf der Live-Seite (Produktion) oder in der Entwicklung (Dev) befinden.
const isProduction = process.env.NODE_ENV === "production"; Dies funktioniert, da Vite diese Umgebungsvariable setzt, wenn wir vite build ausführen, was wir für die Produktion tun, im Gegensatz zum Dev-Modus mit Hot Module Reloading.
Als Nächstes weisen wir Vite an, unsere Assets von unserem CDN wie folgt zu beziehen, indem wir die Eigenschaft base unseres Konfigurationsobjekts setzen.
export default defineConfig({
base: isProduction ? process.env.REACT_CDN : "",Stellen Sie sicher, dass Sie Ihre Umgebungsvariable REACT_CDN auf den Standort Ihres CDN setzen, der in diesem Fall der Standort Ihrer CloudFront-Distribution sein wird. Meine sieht ungefähr so aus (aber nicht genau so)
https://distributiondomainname.cloudfront.netAchten Sie auf Ihre VitePWA-Einstellungen!
Als letzte Aufräumarbeiten: Wenn Sie zufällig das VitePWA-Plugin verwenden, stellen Sie sicher, dass Sie Ihre base-Eigenschaft wie folgt zurücksetzen.
VitePWA({
base: "/",Andernfalls hat Ihre web.manifest-Datei ungültige Einstellungen und verursacht Fehler.
Lassen Sie uns das CDN in Aktion sehen
Sobald alles eingerichtet ist, besuchen Sie Ihre Website und untersuchen Sie die Netzwerkanfragen für Ihre Skript- oder CSS-Dateien. Zunächst sollte das Protokoll h2 sein.
Von dort aus können Sie sich die Antwort-Header einer dieser Dateien ansehen, und Sie sollten dort einige CloudFront-Daten sehen.
Cache-Busting
Es ist schwer, über CDNs zu sprechen, ohne Cache-Busting zu erwähnen. CDNs wie CloudFront haben Funktionen, um Elemente manuell aus dem Cache zu "entfernen". Aber für von Vite erstellte Assets erhalten wir dies "kostenlos", da Vite Fingerprinting oder Hash-Codes zu den Dateinamen der von ihm produzierten Assets hinzufügt.
Vite könnte also eine Datei namens home.js während eines Builds in home-abc123.js umwandeln. Wenn Sie diese Datei dann ändern und neu erstellen, könnte sie zu home-xyz987.js werden. Das ist gut, da es den "Cache bricht" und die neu erstellte Datei nicht im Cache gespeichert wird, sodass das CDN gezwungen ist, für den eigentlichen Inhalt auf unsere Host-Domain zurückzugreifen.
CDN-Caching für andere statische Assets
JavaScript-, CSS- und Schriftdateien sind nicht die einzigen Arten von Assets, die von CDN-Caching profitieren können. Wenn Sie über einen S3-Bucket verfügen, aus dem Sie Bilder bereitstellen, sollten Sie auch eine CloudFront-Distribution dafür einrichten. Es gibt spezielle Optionen für S3, die die Erstellung zum Kinderspiel machen. Sie erhalten nicht nur das gleiche Edge-Caching, sondern auch HTTP/2-Antworten, die S3 nicht bietet.
Fortgeschrittene CDN-Praktiken
Die Integration eines CDN war hier einigermaßen unkompliziert, aber wir nutzen nur einen Bruchteil der potenziellen Vorteile. Im Moment besuchen Benutzer unsere App, unser Server liefert unsere Root-HTML-Datei aus, und dann stellt der Browser des Benutzers eine Verbindung zu unserem CDN her, um alle unsere statischen Assets herunterzuladen.
Weiterführend möchten wir unsere gesamte Website von einem CDN ausliefern. Auf diese Weise kann sie bei Bedarf mit unserem Webserver für nicht-statische und nicht-gecachte Assets kommunizieren.
Fazit
CDNs sind eine großartige Möglichkeit, die Leistung Ihrer Website zu verbessern. Sie bieten Edge-Caching und HTTP/2 direkt nach der Installation. Nicht nur das, sondern sie sind auch relativ einfach einzurichten. Jetzt haben Sie ein neues Werkzeug zur Verfügung, um sowohl ein CDN einzurichten als auch es mit Vite zu integrieren.