非同期読込みをキャッシュさせない

非同期読み込みの際は注意

HTMLやCSSがキャッシュされてしまい、変更が反映されないということはよくありますが、もちろんJSもキャッシュされます。

特にAjaxなどを用いた非同期読み込みの際はキャッシュされることがあるので注意です。

$.ajaxを用いた場合

cache : falseを指定します。

$.ajax( {
    url : "http://example.com/",
    cache : false,
    ...
} );

実はこれ、以前iframeに関する記事でも書かせた頂いたように、URLの末尾に?12345...という現在時刻のUNIX時間が付加されたものになります。 他には、ifModified:falseを指定。

$.ajax( {
    url : "http://example.com/",
    ifModified : false,
    ...
} );

またはリクエストヘッダにIf-Modified-Sinceを設定（値は過去の日付ならば特に問わないとか）。

$.ajax( {
    url : "http://example.com/",
    beforeSend : function( xhr ){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    ...
} );

requireJSを用いた場合

モジュールの非同期読み込みを実装するrequireJSというフレームワークを用いても、同じことが起こります。

requireJSの本体入手・ドキュメントの参照は以下をご覧ください

RequireJS

 こちらのケースではかなり頻繁にキャッシュされるので、設定ファイルに次のように書きます。

require.config({
    .....
    urlArgs: "time="+ (new Date()).getTime(),
    .....
});

こちらも上記同様に現在時刻のUNIX時間をURLの末尾に追加します。

または、毎回キャッシュしなくてもいい場合は、バージョンが変わった際に

require.config({
    .....
    urlArgs: "ver=v2",
    .....
});

と設定してもいいらしいです。