Hinzufügen von CDN Caching zu einem vite -Build

Durch die Nutzung eines Content Delivery Network (CDN) wird die Website -Leistung erheblich verbessert, indem statische Vermögenswerte näher an den Benutzern zwischengespeichert werden. CDNs erreichen dies, indem sie Inhalte auf global verteilte Kantenserver verteilen. Wenn ein Benutzer auf Ihre Website zugreift, leitet die CDN die Anforderung auf den nächsten Server an. Wenn das Vermögenswert bereits zwischengespeichert ist (von einem früheren Besuch oder einem anderen Benutzer), wird er sofort serviert. Andernfalls holt der CDN es von Ihrem Ursprungsserver ab, rehrt es aus und liefert es dann.

In diesem Tutorial wird AWS Cloudfront als Beispiel verwendet, um zu demonstrieren, wie eine Verteilung so konfiguriert wird, dass JavaScript, CSS, Schriftart Dateien und andere statische Assets bedient und in einen Vite -Build -Prozess integriert werden. Für einen robusteren Ansatz in Betracht ziehen die Verwendung von Infrastruktur-As-Code-Tools wie dem serverlosen Framework oder dem AWS-CDK. Der Einfachheit halber werden wir jedoch die AWS -Konsole verwenden.

Konfigurieren einer AWS -Cloudfront -Verteilung

1. Navigieren Sie zur Cloudfront -Homepage in der AWS -Konsole.
2. Klicken Sie auf die Schaltfläche "Verteilung erstellen".
3. Geben Sie im Erstellungsbildschirm die Ursprungsdomäne an (wo sich Ihr Vermögen befindet). Die meisten Standardeinstellungen sind geeignet.
4. Wählen Sie "cors-with-Preflight" aus der Dropdown "Antwort-Header-Richtlinie" aus.
5. Klicken Sie auf "Verteilung erstellen". Ihre neue Verteilung wird dann erscheinen.

Integration von CloudFront in vite

Während der Einrichtung des CDN ist Ihre Website für das Abrufen von Vermögenswerten aus der Website von wesentlicher Bedeutung. Diese Integration ist in verschiedenen Build -Systemen ähnlich (Webpack, Rollup usw.).

1. Stellen Sie in Ihrer Datei vite.config.ts fest, ob der Build für die Produktion bestimmt ist:

 const isProduction = process.env.node_env === "Produktion";

2. Konfigurieren Sie VITE so, dass die CDN in der Produktion verwendet wird:

 Standard default DefinoConfig ({{
  Basis: ISProduction? process.env.react_cdn: "",
});

Denken Sie daran, die Variable der REACT_CDN -Umgebungsvariable auf die URL Ihrer CloudFront -Verteilung festzulegen (z https://distributiondomainname.cloudfront.net

Vitepwa -Kompatibilität

Wenn Sie das Vitepwa -Plugin verwenden, stellen Sie sicher, dass Ihre base korrekt eingestellt ist:

 Vitepwa ({{
  Basis: "/",
});

Falsche Einstellungen können zu Fehlern in Ihrer web.manifest -Datei führen.

Überprüfung der CDN -Funktionalität

Überprüfen Sie nach dem Einrichten Netzwerkanfragen auf das Vermögen Ihrer Website. Sie sollten das h2 -Protokoll beobachten. Untersuchen Sie die Antwortüberschriften; Sie finden CloudFront-bezogene Daten, die die Beteiligung des CDN bestätigen.

Cache Busting mit vite

VITE behandelt automatisch das Cache, das durch Fingerabzüge sprengt. Es fügt Hash-Codes zu Asset-Dateinamen (z. B. home-abc123.js ) hinzu. Wenn sich die Vermögenswerte ändern, ändert sich der Hash und zwingt den CDN, die aktualisierte Version abzurufen.

Erweiterung des CDN -Caching

CDN Caching -Vorteile erstrecken sich über JavaScript, CSS und Schriftarten hinaus. Wenn Sie S3 für den Bildspeicher verwenden, sollten Sie eine CloudFront -Verteilung dafür konfigurieren. Dies liefert nicht nur das Randspeicher, sondern ermöglicht auch die HTTP/2 -Unterstützung, die S3 fehlt.

Erweiterte CDN -Strategien

Dieses Tutorial umfasst die grundlegende CDN -Integration. Um eine optimale Leistung zu erzielen, sollten Sie Ihre gesamte Site vom CDN vom CDN bedienen, sodass sie nur für dynamische Inhalte mit Ihrem Ursprungsserver interagieren.

Abschluss

CDNs sind ein leistungsstarkes Tool zur Verbesserung der Website -Leistung, indem Sie Edge Caching und HTTP/2 -Unterstützung bieten. Dieser Leitfaden vereinfacht den Prozess der Einrichtung eines CDN und der Integration in VITE, wodurch Sie eine wertvolle Leistungsoptimierungstechnik ausstatten.

Das obige ist der detaillierte Inhalt vonHinzufügen von CDN Caching zu einem vite -Build. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!