アレっぽいやつ

web系エンジニアがカチャカチャ書く

(初心者向け)JavaScript, cssのキャッシュ削除できないとき

キャッシュを読み込んでいるせいで、CSSが反映されなかったり、JavaScriptのファイルが変な読み込まれ方をしたりすることがある。
原因はブラウザ側のキャッシュか、サーバー側でのキャッシュであることが多い。
開発を初めたばっかりの人だったり、デザイナーさんとかに、とりあえず試してほしいことを書く。

ブラウザ側でキャッシュを読み込まないようにする

ChromeのDeveloper Toolsで設定したり、Hard Reloadすることで毎回リセットされる。
読み込むときに、クエリを適当につけて毎回違うソースから読んでる感じにする方法もある。
調べたら、色々でるので、適当に試してもらいたい。

サーバーサイドでキャッシュを吐かないようにする

webサーバーにnginx を使っている場合を例に出すと、confファイルに

location ~ \.(css|js)$ {
  proxy_no_cache 1;
  proxy_cache_bypass 1;
  sendfile off;
}

って書いてreloadすれば、nginx が 〜.js, 〜.css に関して、キャッシュを返さないようになる。
もちろん、.(css|js)$ の正規表現を変更すれば、jsファイル,css以外にも適用される。

Apacheはこのページビューが多かったら書く。

※使っているframworkによっては、framewarkでキャッシュを管理してるものがあるので、 ↑で解決されないときは、さらにそのへんもチェックする必要がある。

自分で開発環境を作成するときに、サーバーの設定はとりあえず動けばいいみたいな人は、 ↑で書いたように、キャッシュを全部切ってもいいと思うが、
レスポンスが〜みたいな人は、ちゃんと設定してください。

一行一行の意味とかは下のサイトとかでまとめてくれてる人がいるので、参考に。

参考サイト

qiita.com