Apa cara terbaik untuk versi CSS dan JS URL?

26

Sesuai dengan Praktik Terbaik Yahoo untuk Mempercepat Situs Anda , kami menayangkan konten statis dari CDN menggunakan header kedaluwarsa cache yang jauh di masa depan. Tentu saja, kita kadang-kadang perlu memperbarui file "statis" ini, jadi saat ini kami menambahkan versi infiks sebagai bagian dari nama file (berdasarkan jumlah SHA1 dari isi file). Demikian:

styles.min.css

Menjadi:

styles.min.abcd1234.css

Namun, mengelola file berversi dapat menjadi membosankan, dan saya bertanya-tanya apakah notasi argumen GET mungkin lebih bersih dan lebih baik:

styles.min.css?v=abcd1234

Yang mana yang Anda gunakan, dan mengapa? Apakah ada pertimbangan terkait peramban atau proxy / cache yang harus saya pertimbangkan?

David Eyk
sumber
Alasan saya bertanya adalah bahwa saya sepertinya ingat pernah mendengar alasan untuk TIDAK menggunakan gaya argumen GET, tetapi saya tidak ingat mengapa.
David Eyk
Tidak menggunakan argumen GET memerlukan penyajian stylesheet dengan semacam script sisi server (Dan itu tidak lagi statis)?
Lotus Notes
@ Lotus: Anda dapat mengirim argumen-GET dan mereka akan diabaikan secara diam-diam jika tidak ada yang mencari mereka.
David Eyk

Jawaban:

10

Menurut Google Make the Web Faster , halaman dengan parameter kueri tidak di-cache oleh banyak proxy HTTP.

Kebanyakan proksi, terutama Squid hingga versi 3.0, tidak menyimpan sumber daya dengan "?" dalam URL mereka bahkan jika ada Cache-control: publictajuk dalam respons. Untuk mengaktifkan caching proxy untuk sumber daya ini, hapus string kueri dari referensi ke sumber daya statis, dan alih-alih enkode parameter ke nama file itu sendiri.

Jadi styles.min.abcd1234.cssadalah solusi yang disukai. Anda dapat menggunakan mekanisme penulisan ulang URL yang sesuai untuk berubah styles.min.abcd1234.cssmenjadi lebih mudah diterapkan secara styles.min.css?v=abcd1234transparan.

Jika Anda hanya mendukung HTTPS, saran itu tidak berlaku, karena proxy biasanya tidak dapat men-cache halaman yang disajikan melalui SSL.

Sampai Ulen
sumber
2
Saya bertanya-tanya apakah informasi mengenai caching string kueri dan server proxy sedikit tanggal? Dokumen Google tidak lagi menggunakan string kueri referensi dan server proxy dalam konteks ini. Meskipun contohnya masih melibatkan mengubah nama file itu sendiri. Squid 2.7 (2008) dan 3.1 (2010) dilaporkan mendukung caching string kueri secara default, dan versi sebelumnya dapat dikonfigurasi untuk mendukung ini.
MrWhite
15

Menggunakan versi gaya GET, dari cache kosong banyak URL - misalnya style.css?v=123dan style.css?v=456- akan mengembalikan konten yang sama. Namun saya tidak dapat melihat ini akan bermasalah, terutama karena Anda hanya akan menautkannya satu per satu.

Saya pikir Anda akan menemukan gaya GET jauh lebih mudah untuk dipertahankan. Anda tidak perlu file terpisah: cukup ubah URL dan browser akan mengambil CSS lagi.

PEMBARUAN: pada penelitian lebih lanjut tampaknya menggunakan string kueri dapat menghentikan peramban yang menyalin file. Namun, jika Anda mengembalikan tajuk yang tepat seperti Expiresini bukan masalah.

UPDATE 2: jawaban yang diterima menunjukkan bahwa beberapa proksi tidak men-cache file dengan string kueri. Namun ini didasarkan pada informasi lama; masalah khusus yang mereka sebutkan di Squid diperbaiki 7 tahun yang lalu. Web yang mengesankan melakukan penulisan yang bagus tentang hal ini.

DisgruntledGoat
sumber
Itulah peringatan yang coba saya ingat. Terima kasih untuk tautannya.
David Eyk
1

Keduanya akan berfungsi sama baiknya karena string kueri dianggap sebagai bagian dari URL dan dengan mengubahnya Anda akan mengubah nama sumber daya sehingga menyebabkan browser mengambil salinan baru file tersebut.

Saya katakan gunakan metode mana saja yang lebih mudah untuk Anda pertahankan.

John Conde
sumber
0

ini bukan jawaban untuk pertanyaan di atas , saya ingin solusi yang lebih baik jadi saya bertanya di sini sendiri

Kedua metode akan memerlukan modifikasi pada file di mana file css dan js dirujuk. Jadi efeknya akan membutuhkan restart server aplikasi setelah melakukan perubahan.

Apakah ada cara yang lebih baik, di mana versi file statis dapat ditangani tanpa harus me-restart server Aplikasi?

berikut ini dikesampingkan dalam solusi

  • mengubah nama file css dan js
  • meneruskan parameter permintaan di url

solusinya juga seharusnya tidak mempengaruhi pengaturan kontrol-cache atau kedaluwarsa.

Terima kasih

Santhosh S
sumber
1
Sepertinya Anda baru di sini. Ini pertanyaan yang bagus. Anda harus mempostingnya seperti itu, mungkin menghubungkan kembali ke pertanyaan ini untuk referensi. Saya telah menandai ini untuk perhatian moderator sehingga mereka dapat membantu Anda.
David Eyk
seperti yang ditunjukkan David, situs ini tidak seperti situs forum lainnya. Jika Anda memiliki pertanyaan baru untuk ditanyakan, silakan klik tombol "ajukan pertanyaan"
Mark Henderson
Ini adalah klarifikasi yang berguna. Jika Anda mengubah lembar gaya Anda, akan lebih baik untuk menjaga nama dan referensi tetap sama, daripada memperbarui ratusan referensi ke sana di seluruh situs.
Mark Stosberg