Kengo's blog

Technical articles about original projects, JVM, Static Analysis and TypeScript.

RequireJSを活用したキャッシュ防止、A/Bテスト、画像事前読込など

[for English user] This article is a simple introduction about my project for Japanese developer. You do not have to read this, reading this project directly would be enough.

RequireJSの応用方法について調べた内容をGitHubでまとめています。実装詳細はGitHubをご覧いただくとして、このエントリではそれぞれの応用について簡単な紹介をしたいと思います。

キャッシュ防止

JavaScriptファイルがブラウザにキャッシュされてしまうために、スーパーリロードなりキャッシュのクリアなりをしないと変更後のファイルが試せないことがあります。

キャッシュを防ぐ方法としてクエリパラメータの利用が知られていますが、RequireJSの設定のひとつであるurlArgsを使うと、このクエリパラメータを自動的に付与することができます。JavaScriptの実装を変更している時だけでなく、パフォーマンステストを行う時にも役立つかもしれません。

requirejs.config({
  urlArgs: "bust=" + (new Date()).getTime();
});

ちなみにhas.jsを使うと、デプロイ後はクエリパラメータを付与しないという設定も可能です。開発中の工夫を最終成果物に影響させないというのはけっこう重要な配慮ですから、こう簡単に実現できるのは嬉しいものです。

var args = "bust=" +  (new Date()).getTime();
if (has("beenOptimized")) {
  args = "";
}
requirejs.config({
  urlArgs: args,
});

see also

ユーザや実行環境によって使用するJavaScriptモジュールを変更する

Require-isプラグインを使うことで、条件に応じて読み込むモジュールを切り替えることができます。A/Bテストやフォールバック、デバイスに応じたモジュールの選択など用途は広いでしょう。

require(['is!a-type?a-type-module:b-type-module'], function(module) {
  alert(module.message);
});

see also

2013/Mar/30追記

こちらの記事によると、A/Bテストと言うよりは多変量テストと呼ぶべきであるようです。

画像の事前ロード

ページが画像ファイルを必要とする前にサーバからファイルをダウンロードしておくと、いざ必要になったときにキャッシュを使うことができるのでページ表示を高速化できます。例えばログインページでログイン後に必要となる画像を事前にロードしておくと、ログイン後の表示が早くなることが期待できます。

やり方は非常に簡単、imageプラグインというそのまんまな名前のプラグインがあるので、これを使ってファイルを読むだけです。cacheプラグインを使えば読んだデータをlocalStorageに入れておくことも可能ですが、キャッシュをクリアする機能がないため本格利用には向かないでしょう。

require(['image!sample.png']);

メッセージの多言語化

通知ポップアップやスピナーなど、JavaScriptからHTMLに対してユーザ向けの文字列を埋め込むことは多いと思います。このとき多言語化が問題になりますが、i18nプラグインを使うだけで足りることが多いでしょう。

注意点として、文字列を記録したJavaScriptモジュール(バンドルと呼ぶようです)はnlsという名前のディレクトリに入れておく必要があります。この名前はプラグインにハードコーディングされています。