回答:
param ?v=1.123
はクエリ文字列を示すため、ブラウザは次のような新しいパスであると見なします。?v=1.0
ます。したがって、キャッシュからではなく、ファイルからロードします。あなたが望むように。
そして、ブラウザは、ソースは、あなたが呼び出す同じ次回滞在すると仮定します?v=1.123
とすべきであるその文字列でそれをキャッシュします。そのため、キャッシュに残りますが、移動するまでサーバーは設定さ?v=1.124
れます。
<link rel="stylesheet" href="style.css?v=1487935578" />
2つの質問:これはキャッシュを効果的に壊しますか?
はい。スタックオーバーフローでもこの方法を使用していますが、1日あたり数百万のビジターと何十億ものさまざまなクライアントとプロキシのバージョンと構成があるため、これでもキャッシュを壊すには不十分な奇妙なケースがあったことを覚えています。しかし、一般的な仮定はこれが機能することであり、クライアントのキャッシュを解除するのに適した方法です。
paramはこれが動的コンテンツであることを示しているため、paramはブラウザにそのURLからの応答をキャッシュしないようにしますか?
いいえ。パラメータはキャッシュポリシーを変更しません。サーバーによって送信されたキャッシュヘッダーは引き続き適用され、サーバーが送信しない場合は、ブラウザーのデフォルトが適用されます。
/static/v22/file.css
あなたは、単一のフォルダ名の変更、例えばで複数のファイルを行うことができますように、 /static/v23/file.css
と/static/v23/mystuff.js
実際のファイル名にバージョン番号を入れる方が安全です。これにより、複数のバージョンを同時に存在させることができるため、新しいバージョンをロールアウトできます。古いバージョンを要求しているキャッシュされたHTMLページがまだ存在する場合は、HTMLで動作するバージョンが取得されます。
インターネット上のどこにでもある最も大きなバージョンのデプロイメントの1つでは、jQueryは実際のファイル名にバージョン番号を使用し、特別なサーバー側ロジックなしで複数のバージョンを安全に共存させることができます(各バージョンは異なるファイルです)。
これは、新しいページと新しいリンクファイルをデプロイするときに(必要な処理です)、キャッシュを無効にし、それ以降、それらのバージョンを効果的にキャッシュできます(これも必要です)。
これは、キャッシュをどの程度堅牢にするかによって大きく異なります。たとえば、Squidプロキシサーバー(およびおそらく他のサーバー)は、クエリ文字列で提供されるURLをデフォルトでキャッシュしないように設定されています-少なくとも、その記事が書かれたときはそうでした。不要なキャッシュミスの原因となる特定のユースケースを問題にしない場合は、クエリパラメータを使用してください。しかし、この問題を回避するファイル名ベースのキャッシュ無効化スキームを設定するのは非常に簡単です。
2つの手法の比較(クエリ文字列とファイル名)はこちら:
クエリ文字列としてのバージョンには2つの問題があります。
まず、バストする必要のあるキャッシュを実装しているブラウザであるとは限りません。特定の(おそらく古い)プロキシは、キャッシュ動作に関してクエリ文字列を無視すると言われています。
第2に、複数のフロントエンドサーバーまたは複数のバックエンドサーバー、あるいはその両方がある特定のより複雑な展開シナリオでは、アップグレードは瞬時ではありません。アセットの古いバージョンと新しいバージョンの両方を同時に提供できる必要があります。たとえば、Google App Engineを使用する場合の影響をご覧ください。
別の同様のアプローチは、htaccess mod_rewriteを使用して、ファイルを提供するときにパスの一部を無視することです。キャッシュされていないインデックスページは、ファイルへの最新のパスを参照します。
開発の観点からは、バージョン番号にparamsを使用するのと同じくらい簡単ですが、ファイル名アプローチと同じくらい堅牢です。
パスの無視された部分をバージョン番号に使用すると、サーバーはそれを無視して、キャッシュされていないファイルを提供します。
1.2.3/css/styles.css
css/styles.css
最初のディレクトリが削除され、htaccessファイルによって無視されるため、同じファイルを提供します
<?php
$version = "1.2.3";
?>
<html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="<?php echo $version ?>/css/styles.css">
</head>
<body>
<script src="<?php echo $version ?>/js/main.js"></script>
</body>
</html>
この方法では、インデックスページのキャッシュを無効にする必要があることに注意してください- <meta>タグを使用して、すべてのブラウザーでキャッシュをオフにしますか?
RewriteEngine On
# if you're requesting a file that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-f
# likewise if a directory that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-d
# otherwise, rewrite foo/bar/baz to bar/baz - ignore the first directory
RewriteRule ^[^/]+/(.+)$ $1 [L]
URLの書き換えが可能な任意のサーバープラットフォームで同じアプローチをとることができます
(mod_rewriteから変更された書き換え条件-/#!/以外のクエリ文字列にディレクトリを書き換えます)
...インデックスページ/サイトエントリポイントのキャッシュ無効化が必要な場合は、常にJavaSriptを使用して更新できます。
<script type="text/javascript">
// 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);
}
</script>
<script>
var storedSrcElements = [
"js/exampleFile.js",
"js/sampleFile.js",
"css/style.css"
];
var head= document.getElementsByTagName('head')[0];
var script;
var link;
var versionNumberNew = 4.6;
for(i=0;i<storedSrcElements.length;i++){
script= document.createElement('script');
script.type= 'text/javascript';
script.src= storedSrcElements[i] + "?" + versionNumberNew;
head.appendChild(script);
}
</script>
### Change the version number (versionNumberNew) when you want the new files to be loaded ###
これがあなたが外部JSファイルを注入するのに役立つことを願っています
<script type="text/javascript">
var cachebuster = Math.round(new Date().getTime() / 1000);
document.write('<scr'+'ipt type="text/javascript" src="external.js?cb=' +cachebuster+'"></scr' + 'ipt>');
</script>