フロントエンドのリソースキャッシュの設定

Liferay DXP 2025.Q4+

重要

JavaScript ファイル の無限キャッシュとキャッシュ構成 には Liferay DXP 2026.Q1 以降が必要です。

サイト上のページにアクセスすると、ページの読み込み時間は、JavaScriptやCSSなどのフロントエンドリソースをどのように取得するかによって異なります。 キャッシュされたファイルは、ブラウザがウェブサーバーから要求する必要のあるファイルよりも高速に取得されます。

LiferayのほとんどのJavaScriptファイルとCSSファイルは、ビルド時にファイル名がハッシュ化されます。 例えば、 clay.css ファイルは、実行時に名前にハッシュ値（ファイルの内容に基づいて生成）が付いた状態で、 clay.(tvERyCVfuRc).css のようになることがあります。 このハッシュ値は、このファイルの固有のバージョンを表しているため、ブラウザはファイルの内容が変更されていないことを識別できます。 これにより、ファイルはキャッシュ に無期限に保持されます。

無限ファイルキャッシュ戦略では、ハッシュ化された各リソースに独自のインポートマップエントリが作成され、それを使用する各ページに組み込まれます。 無制限のキャッシュは、Webサーバーへのリクエスト数を減らし、パフォーマンスを向上させることができます。 しかし、環境によっては、マップのインポート方法を変更するとページサイズが大幅に増加し、パフォーマンスに悪影響を与える場合があります。 無限キャッシュを有効にする前に、 キャッシュ戦略 ドロップダウン メニューを使用して、サイトのページへの影響を慎重に検討してください。

多くのリソースは無期限にキャッシュできるため、変更されたコンテンツでファイルが再デプロイされたときにのみ更新されますが、 一部のファイル は常にキャッシュ内での有効期限 (TTL) が限られています。 この時間が経過すると、リソースを再度提供するには、Webサーバーにリクエストを送信してファイルの更新を確認し（更新が存在する場合は取得する）、更新の有無を確認する必要があります。

フロントエンドキャッシュの動作設定

インスタンス設定で、フロントエンドリソースのキャッシュ動作を設定してください。

1. 管理者としてログインしてください。

2. アプリケーション () → インスタンス設定 に移動します。

3. プラットフォームの下で、 インフラストラクチャ をクリックします。

4. 仮想インスタンススコープの下で、 フロントエンドキャッシングをクリックします。

このページでは、

キャッシュ戦略: リソース ファイルごとに 1 つのハッシュを選択するか、ハッシュ化されたフロントエンド リソースを使用しないかを選択します。 リソースファイルごとに1つのハッシュを使用することで、ファイルのキャッシュを無制限に行うことができます。

CSS スタイル シートの最大有効期間ディレクティブ値: CSS ファイルの TTL (秒単位)。 無限ファイルキャッシュを有効にした場合、これはキャッシュが制限されている CSS ファイル にのみ適用されます。 トークン化されたCSSファイルには、独自の構成があります。

JavaScript ファイルの最大有効期間ディレクティブ値: JS ファイルの TTL (秒単位)。 無限ファイルキャッシュを有効にした場合、これはキャッシュが制限されている JavaScript ファイル にのみ適用されます。 ラベルモジュールと翻訳済みJSファイルには、それぞれ独自の構成があります。

Labels Modules Max Age ディレクティブの値：翻訳ラベルを持つすべての .js ファイルの TTL (秒)

CSS スタイル シートのキャッシュなしディレクティブを送信: キャッシュされたファイルが有効な場合でも、各 CSS リソースが更新されたかどうかをサーバーに強制的にチェックさせるには、これを選択します。 無限ファイルキャッシュを有効にした場合、これはキャッシュが制限されている CSS ファイル にのみ適用されます。 トークン化されたCSSファイルには、独自の構成があります。

JavaScript ファイルのキャッシュなしディレクティブを送信: キャッシュされたファイルが有効な場合でも、各 JS リソースが更新されたかどうかをサーバーに強制的にチェックさせるには、これを選択します。 無限ファイルキャッシュを有効にした場合、これはキャッシュが制限されている JavaScript ファイル にのみ適用されます。 ラベルモジュールと翻訳済みJSファイルには、それぞれ独自の構成があります。

Send No Cache Directive for Labels Modules：翻訳ラベルを含むそれぞれのall.jsファイルが更新されたかどうか (キャッシュされたファイルが有効であっても) をサーバがチェックするように強制する場合に選択します。

トークン化された CSS スタイル シートに対してキャッシュしない指示を送信する: このオプションを選択すると、サーバーは各 トークン化された CSS ファイル が更新されたかどうかを強制的に確認します (キャッシュされたファイルが有効な場合でも)。

トークン化された CSS スタイル シートの最大有効期間ディレクティブ値: トークン化された CSS ファイル の TTL (秒単位) 。

翻訳済み JavaScript ファイルの最大有効期間ディレクティブ値: 翻訳済み JS ファイル の TTL (秒単位) 。

キャッシュが制限されているファイル

ほとんどの標準の CSS ファイルと JavaScript ファイルはハッシュ化できるため、 リソース ファイルごとに 1 つのハッシュを有効にすると 、無期限にキャッシュできます。 上記のTTL設定は、無限キャッシュを有効にする場合には適用されません。

しかし、ファイルによってはその内容によってはハッシュ化できないものもあります。

キャッシュが制限されたCSSファイル

これらのCSSファイルは内容上ハッシュ化できないため、キャッシュ内での有効期限（TTL）は常に制限されます。

• カスタムテーマ、ポートレット、クライアント拡張機能のCSS。 ファイルをデプロイする前にハッシュ化するのは開発者の責任です。

• 動的に置換されたトークンを含む CSS ファイル (例: @base_url@、 、または https://learn.liferay.com/o/dialect-theme/images)。 これらのトークンは実行時に解決されるため、無期限にキャッシュすることはできません。

警告

CSSトークン値は非推奨であり、使用は推奨されません。

キャッシュが制限されているJavaScriptファイル

これらのJSファイルは内容上ハッシュ化できないため、キャッシュ内での有効期限（TTL）は常に制限されます。

• カスタムテーマ、ポートレット、クライアント拡張機能のJS。 ファイルをデプロイする前にハッシュ化するのは開発者の責任です。

• all.js 他のJSファイルで使用される翻訳を含むファイル。 翻訳内容は時間とともに変化する可能性があるため、無期限にキャッシュしておくことはできません。

• 翻訳された JS ファイルは、 Liferay.Language.get() を使用して、独自のリソース バンドルを提供します。 これらのファイルはLiferay DXP以外で作成されたアセットに依存しているため、ファイルハッシュ化に同じプロセスを使用することはできません。

関連トピック

• インスタンス設定