Ajout de la mise en cache CDN à une version Vite

Tirer parti d'un réseau de livraison de contenu (CDN) améliore considérablement les performances du site Web en mettant en cache des actifs statiques plus près des utilisateurs. Les CDN y parviennent en distribuant du contenu à travers des serveurs de bord dispersés à l'échelle mondiale. Lorsqu'un utilisateur accède à votre site, le CDN dirige la demande au serveur le plus proche. Si l'actif est déjà mis en cache (à partir d'une visite précédente ou d'un autre utilisateur), il est servi instantanément. Sinon, le CDN le récupére à partir de votre serveur d'origine, le met en cache, puis le livre.

Ce tutoriel utilise AWS CloudFront comme exemple, démontrant comment configurer une distribution pour servir JavaScript, CSS, fichiers de police et autres actifs statiques, et l'intégrer avec un processus de construction VITE. Pour une approche plus robuste, envisagez d'utiliser des outils d'infrastructure comme le code comme le framework sans serveur ou AWS CDK. Cependant, pour simplifier, nous utiliserons la console AWS.

Configuration d'une distribution AWS CloudFront

1. Accédez à la page d'accueil CloudFront dans la console AWS.
2. Cliquez sur le bouton "Créer une distribution".
3. Dans l'écran de création, spécifiez le domaine d'origine (où résident vos actifs). La plupart des paramètres par défaut conviennent.
4. Surtout, sélectionnez "CORS-With-Preflight" dans la liste déroulante "Politique des en-têtes de réponse".
5. Cliquez sur "Créer une distribution". Votre nouvelle distribution apparaîtra alors.

Intégrer le cloudfront à Vite

Bien que la configuration du CDN soit essentielle, votre site Web doit être configuré pour en récupérer des actifs. Cette intégration est similaire dans divers systèmes de construction (WebPack, Rollup, etc.).

1. Dans votre fichier vite.config.ts , déterminez si la construction est pour la production:

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

2. Configurez Vite pour utiliser le CDN en production:

 Exporter de défaut DefiConfig ({
  Base: Isproduction? process.env.react_cdn: "",
});

N'oubliez pas de définir la variable d'environnement REACT_CDN sur l'URL de votre distribution CloudFront (par exemple, https://distributiondomainname.cloudfront.net ).

Compatibilité Vitepwa

Si vous utilisez le plugin Vitepwa, assurez-vous que votre propriété base est correctement définie:

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

Les paramètres incorrects peuvent entraîner des erreurs dans votre fichier web.manifest .

Vérification des fonctionnalités CDN

Après la configuration, inspectez les demandes du réseau pour les actifs de votre site. Vous devez observer le protocole h2 . Examiner les en-têtes de réponse; Vous trouverez des données liées à CloudFront confirmant l'implication du CDN.

Cache battant de vite

Vite gère automatiquement le cache qui se déroule à travers les empreintes digitales. Il ajoute des codes de hachage aux noms de fichiers d'actifs (par exemple, home-abc123.js ). Lorsque les actifs changent, le hachage change, forçant le CDN à récupérer la version mise à jour.

Extension de la mise en cache CDN

Les avantages de mise en cache CDN s'étendent au-delà de JavaScript, CSS et des polices. Si vous utilisez S3 pour le stockage d'images, envisagez de configurer une distribution CloudFront pour elle. Cela fournit non seulement une mise en cache de bord, mais permet également la prise en charge de HTTP / 2, ce qui manque à S3.

Stratégies CDN avancées

Ce tutoriel couvre l'intégration de base CDN. Pour des performances optimales, envisagez de servir l'ensemble de votre site à partir du CDN, ce qui lui permet d'interagir avec votre serveur d'origine uniquement pour le contenu dynamique.

Conclusion

Les CDN sont un outil puissant pour améliorer les performances du site Web en fournissant une mise en cache Edge et une prise en charge HTTP / 2. Ce guide simplifie le processus de configuration d'un CDN et de l'intégrer à Vite, vous équipant d'une technique précieuse d'optimisation des performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!