構築時にキャッシュをなんとかしたい、ホームページ制作時に便利な方法

 

ホームページ制作時のちょっとしたテクニック、
これまで社内でのみ共有のEVERNOTE等に書いていたのですが、
特に公開しても問題ないなーと思いましたので、BLOG等に書いていきたいと思います。

昨今いかに閲覧を早くするかへ主眼が置かれ、どの環境でもキャッシュファイルが残ることが多いです。

スーパーリロード(Ctrlキー+F5キー)等をすれば解決しますが、確認時、毎回この離れたキーを押すのはとても大変。

設定その他をいじれば、少し便利に確認できます。

 

開発者ツール操作時にキャッシュを無視する

基本ブラウザで構築確認時には、開発者ツールを開いていると思います。
(右クリック→要素を調査or検証ででてくるアレ)

FirefoxでもChromeでも、開発者ツールを出した状態で、「F1」キーを押してください。

それぞれ下記のようなオプション設定画面が開きます。

この中に、それぞれキャッシュ無効化を設定する欄がありますので、チェックをいれてください。

 

これで開発者ツールを開いている間は、キャッシュが全て無視されます

もちろんブラウザそのものから、キャッシュを残さない方法もあります。ただ日常使いとしては少し不便です…

 

お客様に見せる際、cssや画像を再読込してもらう方法

こちらのPCは上記の方法も含め、どうにでもなるのですが、
困るのはお客様に確認していただく時です。

パソコンで見てもらえるなら、まだ「Ctrl+F5キー」等の方法もあるのですが、
スマートフォンやタブレットしかお持ちでないお客様の場合、キャッシュクリアの方法を案内するのはとても大変。
お客様の利便性も損ないます。

そこで裏技的な方法

画像やcssを読み込むタグに、パラメータをひっつけます。

例:<img src=”test.jpg?a>

例:<link rel=’stylesheet’ href=’style.css?a‘ type=’text/css’ media=’all’ />

これをつけると、今まで保存されたキャッシュとは別ファイル扱いになり、再読込が掛けられます。
つけた状態からさらに更新したい場合は?b等パラメータを変更してください。

 

……まあ更新した全てのファイルにつけるのは大変ですし、
Grunt等でタイムスタンプ付けたらいいじゃん……というのはごもっともなのですが、
ひとまずどの環境でもそれなりに使える方法のTipsでした。

お役立てください。