Bağlantı ve komut dosyası etiketlerindeki CSS ve Javascript URL'lerine “? V = 1” eklemek ne yapar?

Bir HTML 5 ortak şablonuna ( http://html5boilerplate.com/ adresinden ) bakıyordum ve "?v=1"CSS ve Javascript dosyalarına atıfta bulunurken URL'lerin kullanımını fark ettim .

1. "?v=1"Bağlantı ve komut dosyası etiketlerindeki CSS ve Javascript URL'lerine ekleme ne yapar ?
2. Tüm Javascript URL'lerinde "?v=1"(aşağıdaki örnekten örnek:) yoktur js/modernizr-1.5.min.js. Durumun böyle olmasının bir nedeni var mı?

Onların örnek 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 -->

Bunlar genellikle, site yeni bir sürümle güncellendiğinde tarayıcının yeni bir sürüm aldığından emin olmak içindir, örneğin oluşturma sürecimizin bir parçası olarak böyle bir şeye sahip oluruz:

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

Bu her yeni kod push ile değiştiği için, istemci sadece sorgu dizesi nedeniyle yeni bir sürüm almak zorunda. Bu sayfaya bakınız (bu cevap sırasında):

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

Yeni bir sürümde bile, SO ekibi bir dosya karma ile gitti bir revizyon numarası yerine, daha iyi bir yaklaşım olduğunu düşünüyorum, tarayıcılar sadece dosya gerçekten değiştiğinde yeni bir sürüm kapmak zorunda kaldı .

Bu yaklaşımların her ikisi de önbellek başlığını gülünç derecede uzun bir şeye ayarlamanıza izin verir, örneğin 20 yıl ... yine de değiştiğinde, bu önbellek başlığı hakkında endişelenmenize gerek yok, tarayıcı farklı bir sorgu dizisi görüyor ve farklı, yeni dosya.

Bu, sunucudan css veya js dosyasının en son sürümünü aldığınızdan emin olur.

Ve daha sonra "?v=2", daha yeni bir sürüme sahipseniz "?v=3", "?v=4"vb. Ekleyebilirsiniz.

Herhangi birini kullanabileceğinizi unutmayın querystring, 'v' bir zorunluluk değildir, örneğin:

"?blah=1"da işe yarayacak.

Ve

"?xyz=1002" çalışacak.

Ve bu yaygın bir tekniktir çünkü tarayıcılar artık js ve css dosyalarını daha iyi ve daha uzun süre önbelleğe alıyor.

Karma çözüm güzeldir, ancak yerel web klasörünüzde hangi dosyanın sürümünün bulunduğunu bilmek istediğinizde gerçekten insan tarafından okunamaz. Çözüm, date/timesürümünüzü damgalamaktır, böylece sunucu dosyanızla kolayca karşılaştırabilirsiniz.

Örneğin, .js or .cssdosyanız tarihli 2011-02-08 15:55:30(son değişiklik) ise, sürüm.js?v=20110208155530

Herhangi bir dosyanın özelliklerini herhangi bir dilde okumak kolay olmalıdır. ASP.Net'te gerçekten kolay ...

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

Coz Of güzel özellikleri / fonksiyonları içine refactored olsun ilk ve kapalı gitmek. Daha fazla bahane yok.

İyi şanslar, Art.

Javascript dosyaları genellikle tarayıcı tarafından beklediğinizden çok daha uzun süre önbelleğe alınır.

Bu, JS dosyanızın yeni bir sürümünü yayınladığınızda genellikle beklenmeyen davranışlara neden olabilir.

Bu nedenle, javascript dosyasının URL'sine bir QueryString parametresi eklemek yaygın bir uygulamadır. Bu şekilde, tarayıcı Javascript dosyasını v = 1 ile önbelleğe alır. Javascript dosyanızın yeni bir sürümünü çıkardığınızda, URL'leri v = 2 olarak değiştirirsiniz ve tarayıcı yeni bir kopya indirmeye zorlanır.

Size soruları cevaplamak için;

"? V = 1" Bu yalnızca css ve js dosyalarının yeni bir kopyasını tarayıcının önbelleğinden kullanmak yerine indirmek için yazılmıştır.

Stil sayfanızın veya js dosyasının sonunda bu sorgu dizesi parametresinden bahsederseniz, tarayıcıyı yeni bir dosya indirmeye zorlar. Bu nedenle .css ve .js dosyalarındaki son değişiklikler tarayıcınızda etkili olur.

Bu sürümü kullanmazsanız, bu dosyalarda son değişiklikleri görüntülemek için sayfayı yenile önbelleğini temizlemeniz gerekebilir.

İşte bu şeyi nasıl ve neden CSS ve JS dosyalarının sürümlendirmesini açıklayan bir makale

Yeni sürümlerin geliştirilmesi / test edilmesi sırasında önbellek bir sorun olabilir, çünkü tarayıcı, sunucu ve hatta bazen 3G telco (mobil dağıtım yaparsanız) statik içeriği önbelleğe alır (örn. JS, CSS, HTML, img). URL'ye sürüm numarası, rasgele sayı veya zaman damgası ekleyerek bunun üstesinden gelebilirsiniz, örneğin: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Saf HTML çalıştırıyorsanız (JSP, ASP, PHP sunucu sayfaları yerine) sunucu size yardımcı olmaz. Tarayıcıda, bağlantılar JS çalışmadan önce yüklenir, bu nedenle bağlantıları kaldırmanız ve JS ile yüklemeniz gerekir.

// 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);
}

Daha önce okuyabileceğiniz gibi, ?v=1 , tarayıcınızın dosyanın 1 sürümünü almasını sağlar. Yeni bir sürümünüz olduğunda, farklı bir sürüm numarası eklemeniz yeterlidir; tarayıcı eski sürümü unutur ve yenisini yükler.

Oluşturma aşamasında dosyalarınızın sürümüne dikkat eden bir yudum eklentisi vardır, bu yüzden manuel olarak yapmanız gerekmez. Bu kullanışlı ve inşa sürecinize kolayca entegre edebilirsiniz. Bağlantı: gulp-annotate

Başkaları tarafından belirtildiği gibi, bu ön uç önbellek bozma için kullanılır. Bunu uygulamak için şahsen grunt-cache-bust npm paketini yararlı buluyorum.