Apa yang dilakukan dengan menambahkan "? V = 1" ke URL CSS dan Javascript di tag tautan dan skrip?

Saya telah melihat template boilerplate HTML 5 (dari http://html5boilerplate.com/ ) dan memperhatikan penggunaan "?v=1"dalam URL saat merujuk ke file CSS dan Javascript.

1. Apa yang dilakukan penambahan "?v=1"ke URL CSS dan Javascript di tag tautan dan skrip?
2. Tidak semua URL Javascript memiliki "?v=1"(contoh dari contoh di bawah ini:) js/modernizr-1.5.min.js. Apakah ada alasan mengapa ini terjadi?

Sampel dari mereka index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Ini biasanya untuk memastikan bahwa browser mendapatkan versi baru ketika situs diperbarui dengan versi baru, misalnya sebagai bagian dari proses pembuatan kami, kami akan memiliki sesuatu seperti ini:

/Resources/Combined.css?v=x.x.x.buildnumber

Karena ini berubah dengan setiap dorongan kode baru, klien dipaksa untuk mengambil versi baru, hanya karena string kueri. Lihat halaman ini (pada saat jawaban ini) misalnya:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

Saya pikir alih-alih nomor revisi, tim SO menggunakan hash file, yang merupakan pendekatan yang lebih baik, bahkan dengan rilis baru, browser hanya dipaksa untuk mengambil versi baru ketika file benar-benar berubah.

Kedua pendekatan ini memungkinkan Anda untuk mengatur header cache menjadi sesuatu yang sangat panjang, katakanlah 20 tahun ... namun ketika itu berubah, Anda tidak perlu khawatir tentang header cache itu, browser melihat querystring yang berbeda dan memperlakukannya sebagai sebuah berbeda, file baru.

Ini memastikan Anda mendapatkan versi terbaru dari file css atau js dari server.

Dan nanti Anda dapat menambahkan "?v=2"jika Anda memiliki versi yang lebih baru "?v=3", "?v=4"dan seterusnya.

Perhatikan bahwa Anda dapat menggunakan apa pun querystring, 'v' bukan suatu keharusan, misalnya:

"?blah=1"akan berhasil juga.

Dan

"?xyz=1002" akan bekerja.

Dan ini adalah teknik umum karena browser sekarang menyimpan file js dan css dengan lebih baik dan lebih lama.

Solusi hash bagus tetapi tidak benar-benar dapat dibaca manusia ketika Anda ingin tahu versi file apa yang ada di folder web lokal Anda. Solusinya adalah memberi date/timestempel pada versi Anda sehingga Anda dapat dengan mudah membandingkannya dengan file server Anda.

Misalnya, jika .js or .cssfile Anda diberi tanggal 2011-02-08 15:55:30(modifikasi terakhir) maka versinya harus sama dengan.js?v=20110208155530

Harus mudah membaca properti file apa pun dalam bahasa apa pun. Di ASP.Net sangat mudah ...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

Karena mendapatkannya dengan baik direfraktorisasi menjadi properti / fungsi terlebih dahulu dan pergilah. Tidak ada lagi alasan.

Semoga beruntung, Art.

File Javascript sering di-cache oleh browser lebih lama dari yang Anda harapkan.

Ini sering kali dapat mengakibatkan perilaku yang tidak terduga saat Anda merilis versi baru file JS Anda.

Oleh karena itu, merupakan praktik umum untuk menambahkan parameter QueryString ke URL untuk file javascript. Dengan cara itu, browser menyimpan file Javascript dengan v = 1. Ketika Anda merilis versi baru dari file javascript Anda, Anda mengubah url ke v = 2 dan browser akan dipaksa untuk mendownload salinan baru.

Untuk menjawab pertanyaan Anda;

"? v = 1" ini ditulis hanya karena untuk mengunduh salinan baru dari file css dan js daripada menggunakan dari cache browser.

Jika Anda menyebutkan parameter string kueri ini di akhir stylesheet atau file js Anda, maka itu memaksa browser untuk mengunduh file baru, Karena itu, perubahan terbaru pada file .css dan .js dibuat efektif di browser Anda.

Jika Anda tidak menggunakan versi ini, Anda mungkin perlu menghapus cache dari refresh halaman untuk melihat perubahan terbaru pada file tersebut.

Berikut adalah artikel yang menjelaskan hal ini Bagaimana dan Mengapa membuat versi file CSS dan JS

Selama pengembangan / pengujian rilis baru, cache dapat menjadi masalah karena browser, server, dan bahkan terkadang telco 3G (jika Anda melakukan penerapan seluler) akan menyimpan cache konten statis (misalnya JS, CSS, HTML, img). Anda dapat mengatasinya dengan menambahkan nomor versi, nomor acak atau cap waktu ke URL misalnya: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Jika Anda menjalankan HTML murni (bukan halaman server JSP, ASP, PHP) server tidak akan membantu Anda. Di browser, tautan dimuat sebelum JS dijalankan, oleh karena itu Anda harus menghapus tautan dan memuatnya dengan JS.

// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}

Seperti yang dapat Anda baca sebelumnya, ?v=1memastikan bahwa browser Anda mendapatkan versi 1 dari file tersebut. Jika Anda memiliki versi baru, Anda hanya perlu menambahkan nomor versi yang berbeda dan browser akan melupakan versi lama dan memuat yang baru.

Ada plugin gulp yang menangani versi file Anda selama fase build, jadi Anda tidak perlu melakukannya secara manual. Ini berguna dan Anda dapat dengan mudah mengintegrasikannya dalam proses pembuatan. Ini tautannya: gulp-annotate

Seperti yang disebutkan oleh orang lain, ini digunakan untuk perusakan cache ujung depan. Untuk mengimplementasikan ini, saya pribadi menemukan paket npm grunt-cache-bust berguna.