web-dev-qa-db-ja.com

require.js data-mainのキャッシュを期限切れにする

AMDモジュールをパッケージ化するためにrequire.jsとr.jsを使用しています。私は次の構文でjqueryとrequirejsを使用しています：

<script data-main="/js/client" src="/js/external/require-jquery.js"></script>

これはすべて素晴らしい事前および事後パッケージングで機能しますが、chrome＆mobile safariがclient.jsのキャッシュバージョンを保持するという問題に頻繁に遭遇します。 client.jsですが、上記の構文を使用してそれを行う方法がわかりません。

私はいくつかのバリエーションを試しました：

<script data-main="js/client.js?b=busted" src="/js/external/require-jquery.js"></script>

しかし、今では/ではなく/jsからclient.jsを取得する必要があるため、404秒です。

私も追加してみました

urlArgs : "bust="+new Date().getTime()

require.configに変更されますが、効果はないようです。

また、同じ値をapp.build.jsに追加しようとしましたが、そこにあるとき、r.jsはjsファイルを連結せず、単にそれらをglします。

Require.jsデータメインスクリプトキャッシュを無効にする適切な構文は何ですか？

javascriptcachingrequirejsbrowser-cacheamd
42
Jesse

Require.configをどのように定義していますか？ require.jsをインポートする前に有効にするには、次のようにコーディングする必要があると思います。

<script type="text/javascript">
    var require = {
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+new Date().getTime()
    };
</script>
<script data-main="app/main" src="/scripts/require.js"></script>

具体的には、require.jsをインポートする前に、「require」という名前のオブジェクトを構築する必要があります。

[〜＃〜] update [〜＃〜]

Jesseが以下のコメントで指摘しているように、実稼働用にrequire {}オブジェクトに適用する必要があるいくつかの機能強化があります。上記の例はRequireJSのドキュメントから引用されており、この質問に回答するためにできる限り修正されていません。

以下に、実稼働で使用するために考慮すべきいくつかの事項を示します。

  • 現在の日時をキャッシュ無効化変数として使用する代わりに、開発環境のビルド番号を使用する必要があります。これにより、クライアントはリリース間でJavascriptをキャッシュできますが、ソフトウェアの更新を行うたびにキャッシュが更新されます。
  • Jesseは、スクリプトのdata-main属性を使用する代わりに、require {}の機能を使用して依存関係を指定します。それが厳密にbetterかどうかはわかりませんが、見た目はきれいだと思います。
  • ニーズに基づいてwaitSecondsを調整します。 RequireJSドキュメントのサンプル値を使用しましたが、必要に応じて値を調整するか、省略してください。

したがって、これらの手法を適用すると、コードは次のようになります。

<script type="text/javascript">
    var require = {
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+{{buildNumber}},
        deps : ['app/main']
    };
</script>
<script src="/scripts/require.js?bust={{buildNumber}}"></script>

この場合、{{buildNumber}}はサーバーから提供される値です。

更新2

UrlArgsキャッシュバストソリューションには問題があります。残念ながら、あなたとあなたのユーザーのウェブブラウザの間にあるかもしれないすべてのプロキシサーバーを制御することはできません。残念ながら、これらのプロキシサーバーの一部は、ファイルをキャッシュするときにURLパラメーターを無視するように構成できます。これが発生すると、間違ったバージョンのJSファイルがユーザーに配信されます。

buildNumberinを使用することをお勧めしますbuildNumber.myModule.js（プレフィックス）またはmyModule.buildNumber.js（ポストフィックス）などのJavaScriptファイル名リクエスト。 baseUrlを変更することにより、プレフィックススタイルを使用できます。

baseUrl: "/scripts/buildNumber",

BaseUrlの末尾に「/」がないことに注意してください。

Postfixソリューションを使用するには、require.jsの修正バージョンを使用する必要があります。詳細については、こちらをご覧ください： https://stackoverflow.com/a/21619359/1017787

明らかにどちらの場合でも、buildNumberを各リリースで変更される何らかのタイプのバージョン番号で置き換えるソリューションを使用する必要があります。

75
JBCP