Javascript Ve Css Dosya Versiyonlama

Kullanıcıların tarayıcılarında kayıtlı olan js ve css dosyalarında bir değişiklik yaptığımızda , o dosyalar önbellekten silinip tekrar yüklenene kadar yaptığımız değişiklik kullanıcı tarafında görülmez . Kullanıcının tarayıcısındaki önbelleğe müdahale edemeyeceğimiz için bazı server taraflı değişiklikler yapmamız gerekmektedir. Tarayıcının güncel js ve css dosyalarını almaya zorlamanın en kolay ve efektif yolu dosya adını veya yolunu değiştirmekten geçer. Diyelim bi değişiklik yaptık, dosya adını veya yolunu güncelledik ve o css veya js dosyalarını kullandığımız sayfaların hepsinde link ve script taglarını değiştirmemiz gerekmektedir.Bu pek de tercih edilen bir yol değildir. Çünkü bir View sayfasında bile atlasanız tasarımınız bozulacaktır. Doysa adını veya yolunu değiştirmenin daha efektif yolları vardır.

  1. > Django, Grunt, Gulp gibi baze Web veya Javascript frameworkleri bize bu imkanı sağlayabilmektedir.
  2. Js veya css dosyalarının adına version numaraları eklenebilir. (versiyon numarası uygulamanın versiyon numarası da olabilr. )

Fakat versiyon numarasını eklediğimizde ki bu dosya adını değiştirmekle aynı manaya gelmektedir, yine gidip bütün layout, view , aspx, ascx sayfalarındaki dosyaların static linklerini güncellememiz gerekir . Bu değişiklik işlemini tek bir noktaya indirgememiz gerekir. Bunu yapmanın en güzel yolu ise Html Helper tanımlamaktır.

namespace jsVersioning.Helpers
{
    public static class FileVersioningHelper
    {
        private readonly static string versionNumarasi = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();
        public static string GeneratePath(string dosyaAdi)
        {
            return string.Format("{0}?v={1}", dosyaAdi, versionNumarasi);
        }
    }

    public static class UrlHelperExtensions
    {
        public static string Stil(this UrlHelper helper, string dosyaAdi)
        {
            return helper.Content(string.Format("~/Content/{0}", FileVersioningHelper.GeneratePath(dosyaAdi)));
        }

        public static string Script(this UrlHelper helper, string dosyaAdi)
        {
            return helper.Content(string.Format("~/Scripts/{0}", FileVersioningHelper.GeneratePath(dosyaAdi)));
        }
    }
}

Yukarıdaki Url Helper extension metodu, uygulamının o anki version numarasını alıp bunu js ve css dosyalarının sonuna versiyon numarası olarak ekleyecektir. Bu noktada unutmamanız gereken bir ayrıntı: tanımladığımız helperı kullanabilmemiz için Bu helper sınıfının bulunduğu isimalanını web.config dosyamıza eklememiz gerekmektedir.

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="jsVersioning" />
        <add namespace="jsVersioning.Helpers" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Aşağıda _Layout.cshtml sayfasına aynı dosyaları bir static yol vererek bir de Url Helper kullarak yazımı ve Üretilen Html çıktıları verilmiştir.

1.UrlHelper Kullanarak:

<link href="@Url.Stil("karayeltasarim.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Script("karayel.js")" rel="stylesheet" type="text/css" />

Üretilen Çıktı:

<link href="/Content/karayeltasarim.css?v=1.0.0.0" rel="stylesheet" type="text/css">
<link href="/Scripts/karayel.js?v=1.0.0.0" rel="stylesheet" type="text/css">

2. Statik Dosya Yolu verilerek:

<script src="~/Scripts/karayel.js"></script>
<link href="~/Content/karayeltasarim.css" rel="stylesheet" />

Üretilen Çıktı:

<script src="/Scripts/karayel.js"></script>
<link href="/Content/karayeltasarim.css" rel="stylesheet">

Bu aşamadan sonra js veya css dosylarımızda bir değişiklik yaptığımızda assembly version numarasını değiştirmemiz yeterli olacaktır. Biz burada Assembly Version numarasını kullandık fakat bunun yerine farklı unique bir değer de olabilir.

Ömer Faruk Dinçer

Yorum Yaz

Yorumlarınız denetimden geçtikten sonra yayınlanmaktadır...