Buste de cache de gorgée rapide

Pour des performances Web optimales, la mise en œuvre de stratégies de mise en cache robustes pour des actifs comme CSS, JavaScript, Images et Fonts est cruciale. Cela permet aux navigateurs de conserver ces fichiers, accélérant considérablement les temps de chargement de page lors de la revisits ou de la navigation dans un site. Cependant, la mise à jour de ces actifs nécessite une méthode pour forcer le navigateur à télécharger les nouvelles versions. Bien qu'il existe plusieurs techniques, cet article détaille une approche récente à l'aide de Gulp.

Tirant l'extraction de modification de la chaîne de requête pour l'éclatement du cache

Contrairement aux croyances antérieures, la modification de la chaîne de requête reste une méthode efficace pour l'éclatement du cache, en particulier avec des services tels que CloudFlare atténue les cas de bord potentiel.

Initialement, votre HTML peut inclure des liens d'actifs comme celui-ci:

<link href="style.css?v=1" rel="stylesheet">

Par la suite, pour forcer un actualisation du cache, modifiez simplement la valeur de la chaîne de requête:

<link href="style.css?v=2" rel="stylesheet">

Le HTML lui-même a généralement des durées de cache plus courts ou n'est pas mis en cache, garantissant une visibilité immédiate des changements de HTML.

Manuel vs cassant de cache automatisé

Auparavant, la rupture du cache manuel impliquait de modifier directement une variable PHP:

  Php $ ver = 1,0; ?> <link href="style.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet"><link href="some-other-asset.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet">

Cette méthode, bien que fonctionnelle, s'est avérée sujette à la surveillance et était généralement lourde.

Automatisation avec Gulp et Gulp-Replace

L'utilisation d'un processus de construction basé sur Gulp, qui gère les tâches comme la compilation SASS, la transpilation Babel et la concaténation des fichiers, permet l'éclatement automatisé du cache. Le plugin gulp-replace simplifie ce processus.

Une tâche Gulp peut être créée pour rechercher une chaîne spécifique (par exemple, cache_bust= ) dans les fichiers d'en-tête et le remplacer par une chaîne basée sur lampe à horaire générée dynamiquement:

 gulp.task ("cache-bust-css", function () {
  var cbstring = new Date (). getTime ();
  Retour Gulp
    .src (["header.php"])
    .tuyau(
      remplacer (/ cache_bust = \ d / g, function () {
        return "cache_bust =" cbstring;
      })
    )
    .Pipe (gulp.dest ("."));
});

Une tâche similaire peut être implémentée pour les fichiers JavaScript.

Optimisation de l'efficacité

L'implémentation actuelle met à jour la chaîne de requête pour tous les actifs CSS chaque fois qu'un actif change. Une approche plus efficace impliquerait de cibler uniquement les fichiers modifiés. Cette optimisation est prévue pour une implémentation future.

Cette stratégie basée sur Gulp n'est qu'une approche. D'autres plugins et systèmes de construction Gulp offrent des méthodes alternatives. Cette solution répond efficacement aux besoins spécifiques de ce projet. N'hésitez pas à partager vos techniques de cache préférées!

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!