クイックガルプキャッシュバスト

最適なWeb​​パフォーマンスのために、CSS、JavaScript、画像、フォントなどの資産に堅牢なキャッシュ戦略を実装することが重要です。これにより、ブラウザはこれらのファイルを保持でき、サイト内の再訪またはナビゲーション時にページの読み込み時間を大幅に高速化できます。ただし、これらの資産を更新するには、ブラウザに新鮮なバージョンをダウンロードするように強制する方法が必要です。いくつかの手法が存在しますが、この記事では、Gulpを使用した最近のアプローチについて詳しく説明しています。

キャッシュバストのクエリ文字列変更を活用します

以前の信念とは反対に、クエリ文字列の変更は、特にCloudFlareの潜在的なエッジケースを軽減するなどのサービスで、キャッシュバストの効果的な方法のままです。

当初、HTMLには次のような資産リンクが含まれる場合があります。

<link href="style.css?v=1" rel="stylesheet">

その後、キャッシュの更新を強制するには、クエリ文字列値を変更するだけです。

<link href="style.css?v=2" rel="stylesheet">

HTML自体は、通常、キャッシュ期間が短いか、キャッシュされていないため、HTMLの変更が即座に可視化されます。

マニュアルと自動化されたキャッシュバスト

以前は、PHP変数を直接変更する手動キャッシュバストが含まれます。

  <link href="style.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet"><link href="some-other-asset.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet">

この方法は機能的ではありますが、監視する傾向があり、一般的に面倒でした。

ガルプとガルプレプレースで自動化します

SASSコンピレーション、バベルの輸送、ファイルの連結などのタスクを処理するGulpベースのビルドプロセスを使用すると、自動キャッシュバストが可能になります。 gulp-replaceプラグインは、このプロセスを簡素化します。

GULPタスクを作成して、ヘッダーファイル内の特定の文字列（ cache_bust= ）を検索し、動的に生成されたタイムスタンプベースの文字列に置き換えることができます。

 gulp.task（ "cache-bust-css"、function（）{
  var cbstring = new date（）。getTime（）;
  Gulpを返します
    .src（["header.php"]）
    。パイプ（
      交換（ /cache_bust = \ d /g、function（）{
        "cache_bust =" cbstringを返します。
      }）
    ））
    .pipe（gulp.dest（ "。"））;
}）;

JavaScriptファイルに同様のタスクを実装できます。

効率のために最適化

現在の実装は、資産が変更されるたびに、すべてのCSSアセットのクエリ文字列を更新します。より効率的なアプローチには、変更されたファイルのみをターゲットにすることが含まれます。この最適化は、将来の実装のために計画されています。

このガルプベースの戦略は、1つのアプローチにすぎません。他のGulpプラグインとビルドシステムは、代替方法を提供します。このソリューションは、このプロジェクトの特定のニーズに効果的に対処します。お好みのキャッシュバストテクニックを自由に共有してください！

以上がクイックガルプキャッシュバストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。