CSS/JS ファイルにクエリ パラメータを追加すると、どのようにしてキャッシュ無効化が実現されますか?

クエリ パラメータの追加によるキャッシュ バスティング

運用環境のデプロイメント中にキャッシュ戦略を強化するには、キャッシュ バスティングを実装することが重要です。 1 つのアプローチには、現在のバージョン番号を含む CSS および JS ファイルにクエリ パラメータを追加することが含まれます。

<link rel="stylesheet" href="base_url.com/file.css?v=1.123"/>

このアプローチでは、ブラウザがパラメータを新しいパスとして扱い、新しいロードをトリガーするため、デプロイメント時にキャッシュが事実上破壊されます。

ただし、パラメータ自体がキャッシュ動作に影響を与えるかどうかを考慮することが重要です。クエリ パラメータ ?v=1.123 はクエリ文字列を示し、通常は一意のリソースを意味します。その結果、ブラウザは、このパラメータで取得したコンテンツは動的であり、キャッシュすべきではないと想定する可能性があります。

幸いなことに、これは当てはまりません。ブラウザは、同じパラメータ値 (?v=1.123 など) を使用した後続のリクエストでもソースが同じままであることを認識します。したがって、バージョン番号が変更されない限り、パラメータに基づいてコンテンツのキャッシュが続行されます。これにより、更新されたパラメータ値 (?v=1.124 など) によって識別される新しいバージョンがデプロイされるまで、コンテンツがキャッシュされたままになります。

以上がCSS/JS ファイルにクエリ パラメータを追加すると、どのようにしてキャッシュ無効化が実現されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。