Pourquoi ajouter le numéro de version au chemin du fichier CSS ?

Question

J'ai remarqué que certains sites web mettent les numéros de version (surtout) dans le chemin du fichier CSS. Par exemple :

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />

Quel est l'objectif principal de l'indication du numéro de version ? Si l'objectif est de se souvenir de la dernière mise à jour du fichier CSS, le numéro de version ne devrait-il pas être ajouté sous forme de commentaire à l'intérieur du fichier CSS ?

Answer 1

De HTML5 Boilerplate Docs :

Qu'est-ce que ?v=1" '?v=1' est le contrôle de version JavaScript/CSS avec Cachebusting

Pourquoi faut-il mettre en cache JavaScript CSS ? Les pages web sont de plus en plus de plus en plus riches, ce qui signifie plus de scripts et de feuilles de style dans la page. Un visiteur qui se rend pour la première fois sur votre page peut être amené à effectuer plusieurs requêtes HTTP mais en utilisant l'en-tête Expires, vous rendez ces composants en cache. Cela permet d'éviter les requêtes HTTP inutiles lors des pages suivantes. Les en-têtes Expires sont le plus souvent utilisés avec les images, mais ils doivent être utilisés pour tous les composants, y compris les éléments suivants mais ils devraient être utilisés pour tous les composants, y compris les scripts, les feuilles de style, etc.

Comment HTML5 Boilerplate gère-t-il le cache JavaScript CSS ? HTML5 Boilerplate est livré avec des fichiers de configuration de serveur : .htacess, web.config et nginx.conf. Ces fichiers indiquent au serveur d'ajouter le contrôle du cache JavaScript CSS.

Quand faut-il utiliser le contrôle de version avec cachebusting ? Traditionnellement, si vous utilisez un en-tête Expires lointain, vous devez modifier le nom de fichier du composant à chaque fois que celui-ci est modifié.

Comment utiliser cachebusting ? Si vous mettez à jour votre JavaScript ou votre CSS, il suffit de mettre à jour les "?v=1" en "?v=2", "?v=3" ... Cela fera croire au navigateur que vous essayez de charger un nouveau fichier, ce qui résoudra le problème de cache. problème de cache.

Answer 2

Il est là pour s'assurer que vous disposez de la version la plus récente. Si vous modifiez votre site web et laissez le nom tel qu'il était auparavant, le navigateur peut ne pas remarquer le changement et utiliser l'ancien CSS de son cache. Si vous ajoutez une version, le navigateur téléchargera la nouvelle feuille de style.

Answer 3

Si vous réglez les caches pour qu'ils expirent dans un avenir lointain en ajoutant ?v=2 permet au serveur de savoir qu'il s'agit d'un nouveau fichier, mais vous n'avez pas besoin de lui donner un nom unique (ce qui vous évite une recherche et un remplacement globaux).

HTM5 boilerplate l'intègre également dans son projet.

Regardez aussi cette vidéo : HTML5 Boilerplate Walkthrough .

Answer 4

L'une des raisons pourrait être le contournement de la mise en cache des fichiers. Les fichiers CSS portant le même nom peuvent être mis en cache par les serveurs et peuvent entraîner un mauvais affichage si la nouvelle version comporte des modifications de la mise en page.

Answer 5

Cela permet d'optimiser la mise en cache du navigateur. Vous pouvez faire en sorte que l'en-tête des fichiers CSS n'expire jamais, de sorte que le navigateur les récupère toujours dans son cache.

Mais si vous faites cela, vous rencontrerez des problèmes lorsque vous modifierez le fichier CSS, car certains navigateurs ne remarqueront pas le changement. En ajoutant/modifiant le paramètre de version, il s'agit d'une "autre" requête, qui ne sera donc pas extraite du cache (mais une fois que la nouvelle version est mise en cache, elle est extraite de ce cache à l'avenir pour économiser la bande passante/le nombre de requêtes jusqu'à ce que la version change à nouveau).

Une explication détaillée est disponible à l'adresse suivante html5boilerplate.com .