2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptやCSSを修正時に確実にブラウザキャッシュを更新させる方法

Posted at

JavaScriptやCSSを修正したのにブラウザのキャッシュに残っていて、サービスが正常に動かないということがありますよね。お客さんに「多分ブラウザキャッシュの効きすぎで〜」とか言い訳したり、「すみません、スーパーリロードしてください」とか案内したくないわけですが、ブラウザも速度のベンチマークを上げるためにゴリゴリとキャッシュを使ってくるので、ファイルを修正したらしっかりとキャッシュ更新してくれるようにしましょう。

##もはやパラメータ付与だけでは更新してくれないことも

少し前までは、JavaScriptやCSSのパスの最後にGETパラメータで更新日付などを入れておけば、ブラウザキャッシュが更新されていたのですが、ここ1年ぐらい前から、Chromeでパラメータを更新しても同じものとみなしてキャッシュが更新されないことがあります。

##これまでのパラメータによる対応

対象となるJSやCSSのファイルの最終更新日時を使ってパラメータを付与していたが、これではもうダメだ。。

####PHPでの実装例

<link href="/css/common.css?<?=filemtime("./css/common.css")?>" rel="stylesheet" type="text/css" />

##絶対更新させる対応

ページ上のファイル名自体にファイルの更新日時をつけることで全く別のファイルとしてアクセスをさせるようにします。
(common.css を common_[filemtime].css でアクセスさせる。)
もちろん、ファイル名自体をそのようにつけるのではなく、以下の例ではcommon.cssという名前のままで、サーバにアップします。
PHP単体での対応ではなくなりますが、以下のようにApacheならmod_rewriteなども使って確実に更新しましょう。

####PHPでの実装例

<link href="/css/common_<?=filemtime("./css/common.css")?>.css" rel="stylesheet" type="text/css" id="common_css" />

(ページの階層がまちまちの場合は、パスの書き方は注意しましょう。)

####Apache conf例

<IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteRule ^\/css\/([a-z_\.0-9]+)_([0-9]+)\.css$  /css/$1.css?$2 [NC]
</IfModule>

##他の方法は無いかな?
都度都度、filemtimeやRewriteが走るので、サーバの負荷的にはあまり優しくないので(いうほどのコストでもないですが)、他の方法も考えてみました。

1.サーバデプロイ時にファイル名自体を設定ファイルで指定した更新日時に変更してアップする
2.サーバデプロイ時にシンボリックリンクを貼る

ちらっとQiitaのHTMLを見た感じだと、更新日時ではなくMD5値を使ってるようですね。
アクセスのたびに都度都度MD5取るのはかなりコスト掛かるでしょうから、おそらくデプロイ、ビルド時に自動的にパスを変換しているんじゃないかなと。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?