Cache Cache Pantas

Untuk prestasi web yang optimum, melaksanakan strategi caching yang mantap untuk aset seperti CSS, JavaScript, imej, dan fon adalah penting. Ini membolehkan penyemak imbas untuk mengekalkan fail -fail ini, dengan ketara mempercepatkan masa beban halaman apabila meninjau semula atau navigasi dalam tapak. Walau bagaimanapun, mengemas kini aset ini memerlukan kaedah untuk memaksa penyemak imbas untuk memuat turun versi segar. Walaupun beberapa teknik wujud, artikel ini memperincikan pendekatan baru -baru ini menggunakan Gulp.

Memanfaatkan pengubahsuaian rentetan pertanyaan untuk busting cache

Bertentangan dengan kepercayaan terdahulu, mengubahsuai rentetan pertanyaan tetap menjadi kaedah yang berkesan untuk menghancurkan cache, terutama dengan perkhidmatan seperti Cloudflare yang mengurangkan kes -kes kelebihan yang berpotensi.

Pada mulanya, HTML anda mungkin termasuk pautan aset seperti ini:

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

Seterusnya, untuk memaksa menyegarkan cache, hanya ubah nilai rentetan pertanyaan:

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

HTML sendiri biasanya mempunyai tempoh cache yang lebih pendek atau tidak di -cache, memastikan penglihatan segera perubahan HTML.

Manual vs Busting Cache Automatik

Sebelum ini, penyusutan cache manual melibatkan secara langsung mengubah suai pembolehubah PHP:

  Php $ ver = 1.0; ?> <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">

Kaedah ini, sementara berfungsi, terbukti terdedah kepada pengawasan dan pada umumnya rumit.

Mengautomasikan dengan Gulp dan Gulp-Replace

Menggunakan proses binaan berasaskan Gulp, yang mengendalikan tugas-tugas seperti penyusunan SASS, transpilation Babel, dan penyambungan fail, membolehkan penyusutan cache automatik. Plugin gulp-replace memudahkan proses ini.

Tugas Gulp boleh dibuat untuk mencari rentetan tertentu (misalnya, cache_bust= ) dalam fail header dan menggantikannya dengan rentetan berasaskan timestamp yang dinamik:

 Gulp.Task ("Cache-Bust-CSS", fungsi () {
  var cbstring = tarikh baru () gettime ();
  kembali gulp
    .src (["header.php"])
    .pipe (
      ganti ( /cache_bust = \ d /g, fungsi () {
        kembali "cache_bust =" cbstring;
      })
    )
    .pipe (gulp.dest ("."));
});

Tugas yang sama boleh dilaksanakan untuk fail JavaScript.

Mengoptimumkan untuk kecekapan

Pelaksanaan semasa mengemas kini rentetan pertanyaan untuk semua aset CSS apabila sebarang perubahan aset. Pendekatan yang lebih cekap akan melibatkan penargetan hanya fail yang diubahsuai. Pengoptimuman ini dirancang untuk pelaksanaan masa depan.

Strategi berasaskan Gulp ini hanya satu pendekatan. Plugin dan sistem binaan lain menawarkan kaedah alternatif. Penyelesaian ini secara berkesan menangani keperluan khusus projek ini. Jangan ragu untuk berkongsi teknik cache yang disukai anda!

Atas ialah kandungan terperinci Cache Cache Pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!