web-dev-qa-db-ja.com

リンクおよびスクリプトタグのCSSおよびJavaScript URLに「？v = 1」を追加するとどうなりますか？

HTML 5ボイラープレートテンプレート（ http://html5boilerplate.com/ から）を見て、CSSおよびJavascriptファイルを参照するときにURLで"?v=1"が使用されていることに気付きました。

  1. リンクおよびスクリプトタグのCSSおよびJavaScript URLに"?v=1"を追加するとどうなりますか？
  2. すべてのJavaScript URLに"?v=1"があるわけではありません（以下のサンプルの例：js/modernizr-1.5.min.js）。これが当てはまる理由はありますか？

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 -->

前もって感謝します。

htmlcssbrowser-cache
130
maxyfc

これらは通常、サイトが新しいバージョンで更新されたときにブラウザが新しいバージョンを取得するようにするためです。ビルドプロセスの一部として、次のようなものがあります。

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

これは新しいコードプッシュごとに変更されるため、クライアントはクエリ文字列のために新しいバージョンを取得する必要があります。たとえば、このページ（この回答の時点）を見てください。

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

リビジョン番号の代わりに、SOチームはファイルハッシュを使用したと思います。これは、新しいリリースであっても、ファイルが新しいバージョンを取得することをブラウザが強制した場合にのみ有効です実際変更。

これらのアプローチの両方により、キャッシュヘッダーを途方もなく長いもの、たとえば20年に設定することができます...それが変更されても、そのキャッシュヘッダーについて心配する必要はありません、ブラウザーは異なるクエリ文字列を見て、それを別の新しいファイル。

165
Nick Craver

これにより、サーバーのcssまたはjsファイルから最新バージョンを確実に取得できます。

そして、新しいバージョンと"?v=2"などがある場合は、後で"?v=3", "?v=4"を追加できます。

任意のquerystringを使用できることに注意してください。たとえば、「v」は必須ではありません。

"?blah=1 "も機能します。

そして

"?xyz=1002"は機能します。

また、ブラウザはjsファイルとcssファイルをより適切に、より長くキャッシュするため、これは一般的な手法です。

22
Amr Elgarhy

ハッシュソリューションは素晴らしいですが、ローカルWebフォルダーにあるファイルのバージョンを知りたい場合は、実際には人間が読むことはできません。解決策は、date/timeバージョンにスタンプを付けて、サーバーファイルと簡単に比較できるようにすることです。

たとえば、.js or .cssファイルの日付が2011-02-08 15:55:30（最終変更）である場合、バージョンは.js?v=20110208155530と等しくなければなりません

任意の言語の任意のファイルのプロパティを読みやすくする必要があります。 ASP.Netでは本当に簡単です...

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

Cozを最初にプロパティ/関数にうまくリファクタリングして、すぐに始めましょう。言い訳無用。

頑張って、アート。

13
Art

多くの場合、JavaScriptファイルは、予想よりもはるかに長い時間ブラウザによってキャッシュされます。

これにより、JSファイルの新しいバージョンをリリースするときに予期しない動作が発生することがよくあります。

したがって、QueryStringパラメーターをjavascriptファイルのURLに追加するのが一般的な方法です。これにより、ブラウザはv = 1のJavascriptファイルをキャッシュします。 javascriptファイルの新しいバージョンをリリースするとき、URLをv = 2に変更すると、ブラウザーは新しいコピーのダウンロードを強制されます。

7
Robin Day

質問に答えるために;

"？v = 1"これはcssの新しいコピーをダウンロードするためにのみ書かれていますブラウザのキャッシュから使用する代わりにjsファイル。

スタイルシートまたはjsファイルの最後にこのクエリ文字列パラメーターを指定すると、ブラウザーに新しいファイルをダウンロードさせます。これにより、.cssおよび.jsファイルの最近の変更がブラウザーで有効になります。

このバージョン管理を使用しない場合、これらのファイルの最近の変更を表示するには、ページの更新のキャッシュをクリアする必要があります。

これを説明する記事があります CSSおよびJSファイルのバージョン管理を行う方法と理由

7
Tapan kumar
// 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);
}
2
Conete Cristian

ちょうど私の2セント。

前に読んだように、?v=1はブラウザがファイルのバージョン1を取得することを保証します。新しいバージョンがある場合、異なるバージョン番号を追加するだけで、ブラウザは古いバージョンを忘れて新しいバージョンをロードします。

gulpプラグインがあり、ビルドフェーズ中にファイルのバージョンを管理するため、手動で行う必要はありません。便利で、ビルドプロセスに簡単に統合できます。リンクはこちら gulp-annotate

0
Phugo