À quoi sert l'ajout de «? V = 1» aux URL CSS et Javascript dans les balises de lien et de script?

J'ai regardé un modèle standard HTML 5 (à partir de http://html5boilerplate.com/ ) et j'ai remarqué l'utilisation de "?v=1"dans les URL pour faire référence aux fichiers CSS et Javascript.

1. À quoi sert l'ajout "?v=1"aux URL CSS et Javascript dans les balises de lien et de script?
2. Toutes les URL Javascript n'ont pas le "?v=1"(exemple de l'exemple ci-dessous:) js/modernizr-1.5.min.js. Y a-t-il une raison pour laquelle c'est le cas?

Échantillon de leur index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Il s'agit généralement de s'assurer que le navigateur obtient une nouvelle version lorsque le site est mis à jour avec une nouvelle version, par exemple dans le cadre de notre processus de construction, nous aurions quelque chose comme ceci:

/Resources/Combined.css?v=x.x.x.buildnumber

Comme cela change à chaque nouvelle poussée de code, le client est obligé de récupérer une nouvelle version, juste à cause de la chaîne de requête. Regardez cette page (au moment de cette réponse) par exemple:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

Je pense qu'au lieu d'un numéro de révision, l'équipe SO a opté pour un hachage de fichier, ce qui est une approche encore meilleure, même avec une nouvelle version, les navigateurs ne sont obligés de saisir une nouvelle version que lorsque le fichier change réellement .

Ces deux approches vous permettent de définir l'en-tête du cache sur quelque chose de ridiculement long, disons 20 ans ... mais quand il change, vous n'avez pas à vous soucier de cet en-tête de cache, le navigateur voit une chaîne de requête différente et la traite comme un différent, nouveau fichier.

Cela garantit que vous obtenez la dernière version du fichier css ou js du serveur.

Et plus tard, vous pouvez ajouter "?v=2"si vous avez une version plus récente "?v=3", "?v=4"et ainsi de suite.

Notez que vous pouvez utiliser n'importe quel querystring, 'v' n'est pas un must par exemple:

"?blah=1"fonctionnera également.

Et

"?xyz=1002" marchera.

Et c'est une technique courante car les navigateurs mettent désormais en cache les fichiers js et css mieux et plus longtemps.

La solution de hachage est agréable mais pas vraiment lisible par l'homme lorsque vous voulez savoir quelle version du fichier se trouve dans votre dossier Web local. La solution consiste à date/timetamponner votre version afin de pouvoir la comparer facilement à votre fichier serveur.

Par exemple, si votre .js or .cssfichier est daté 2011-02-08 15:55:30(dernière modification), la version doit être égale à.js?v=20110208155530

Devrait être facile à lire les propriétés de n'importe quel fichier dans n'importe quelle langue. Dans ASP.Net, c'est vraiment simple ...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

Bien sûr, faites-le bien remanié en propriétés / fonctions d'abord et c'est parti. Plus d'excuses.

Bonne chance, Art.

Les fichiers Javascript sont souvent mis en cache par le navigateur pendant beaucoup plus longtemps que prévu.

Cela peut souvent entraîner un comportement inattendu lorsque vous publiez une nouvelle version de votre fichier JS.

Par conséquent, il est courant d'ajouter un paramètre QueryString à l'URL du fichier javascript. De cette façon, le navigateur met en cache le fichier Javascript avec v = 1. Lorsque vous publiez une nouvelle version de votre fichier javascript, vous changez l'URL en v = 2 et le navigateur sera obligé de télécharger une nouvelle copie.

Afin de répondre à vos questions;

"? v = 1" ceci n'est écrit que pour télécharger une nouvelle copie des fichiers css et js au lieu d'utiliser depuis le cache du navigateur.

Si vous mentionnez ce paramètre de chaîne de requête à la fin de votre feuille de style ou du fichier js, cela force le navigateur à télécharger un nouveau fichier, en raison duquel les modifications récentes dans les fichiers .css et .js sont rendues effectives dans votre navigateur.

Si vous n'utilisez pas ce contrôle de version, vous devrez peut-être vider le cache pour actualiser la page afin d'afficher les modifications récentes de ces fichiers.

Voici un article qui explique cette chose Comment et pourquoi faire le versionnage des fichiers CSS et JS

Lors du développement / test de nouvelles versions, le cache peut être un problème car le navigateur, le serveur et même parfois l'opérateur de télécommunications 3G (si vous effectuez un déploiement mobile) mettront en cache le contenu statique (par exemple JS, CSS, HTML, img). Vous pouvez surmonter cela en ajoutant le numéro de version, le nombre aléatoire ou l'horodatage à l'URL, par exemple: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Dans le cas où vous exécutez du HTML pur (au lieu des pages serveur JSP, ASP, PHP), le serveur ne vous aidera pas. Dans le navigateur, les liens sont chargés avant l'exécution du JS, vous devez donc supprimer les liens et les charger avec JS.

// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}

Comme vous pouvez le lire auparavant, le ?v=1 garantit que votre navigateur obtient la version 1 du fichier. Lorsque vous avez une nouvelle version, il vous suffit d'ajouter un numéro de version différent et le navigateur oubliera l'ancienne version et chargera la nouvelle.

Il existe un plugin gulp qui s'occupe de la version de vos fichiers pendant la phase de construction, vous n'avez donc pas à le faire manuellement. C'est pratique et vous pouvez facilement l'intégrer dans votre processus de construction. Voici le lien: gulp-annotate

Comme mentionné par d'autres, ceci est utilisé pour le contournement du cache frontal. Pour implémenter cela, j'ai personnellement trouvé le paquet npm grunt-cache-bust utile.