1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLページでjs、cssファイルのキャッシュを自動でクリーンアップ(バージョン番号を自動で付与)。

2022-01-25 13:30:30

 Webプロジェクトの開発プロセスでは、我々はしばしば(明らかにコードを変更したが、ブラウザで変更にアクセスするために発生しませんでした)しばしばキャッシュの問題をファイルを更新した後、CSS、JSファイルを参照してください、この状況は、我々は通常、次の2つのソリューションを使用します。

1. ブラウザのキャッシュを手動でクリアする

2、バージョン番号を追加する(例:layout.css?v=1)

個人的には、ブラウザのキャッシュをクリアするとブラウザの反応を待つ必要があるので、2の方法の方が早いと思っています。ただ、バージョン番号を毎回変更するのも面倒なので、自動的に追加する方法を考える必要があります。

私のメソッド集はこちらです。

方法1:jsでhtmlにバージョン番号を自動付与する方法

 <script type="text/javascript">  
document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>");   
</script>  

方法2:jspページであれば、javaコードでタイムスタンプを生成する(方法1でも可能ですが、こちらの方法の方が便利です。)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>" ;>  

方法3:node.jsによる自動設定など、他の方法でバージョン番号を付加する方法

ps: キャッシュをクリアする目的は、ページの更新をタイムリーに確認するためです。ページをオンラインにする(つまり、これ以上変更が加えられない正式な環境に展開する)ときは、キャッシュを持つページの方がアクセスが速いので、バージョン番号を固定し、更新が必要になったときに固定したバージョン番号を入れ替えることが推奨されます。

今回は以上です。皆様の学習のお役に立てれば幸いです。そして、スクリプトハウスを応援していただければ幸いです。