Asp.NET Core MVC – Smidge Kütüphanesiyle Bundle İşlemi

Merhaba,

Bu içeriğimizde Asp.NET Core MVC uygulamalarında büyük boyutlu JavaScript ve CSS dosyalarının boyutlarını küçültmek için sarmak/kundaklamak manasına gelen bundle işlemini çalışma zamanında yapmamızı sağlayan Smidge kütüphanesi üzerine konuşacağız.

İlk olarak Smidge kütüphanesinin temel olarak benimsediği terimleri anlamlandırarak başlayalım.

Bundling & Minification Ne Demektir?
Web sitelerinde performans ve yüklenme hızlarını arttırmak için yapılan eylemleri tarif etmek için kullanılan terimlerdir.

Bundling; anlamsal olarak ‘gruplama’ demektir ve köken olarak(bund) ‘federasyon’ yahut ‘dernek’ kökeninden gelmektedir. Buradan da anlaşılan birden fazla JavaScript, CSS vs. gibi dosyaları tekbir dosyada birleştirmektir.

Örneğin; 3 JS + 2 CSS dosyasını bundling ettikten sonra 1 JS + 1 CSS dosyası olarak çıktı verecektir.

Minification; JS yahut CSS dosyalarının içeriklerinde bulunan gereksiz karakterlerin veya yorum satırlarının temizlenmesi ve böylece boyutlarının küçültülmesi işlemidir.

Smidge kütüphanesi uygulamadaki JS ve CSS dosyalarını hem bundling hem de minification işlemlerine tabii tutmaktadır.

Smidge Kütüphanesinin Entegrasyonu
Uygulamanıza Smidge kütüphanesini entegre edebilmeniz için nuget adresinden ilgili kütüphaneyi edinebilirsiniz. Ayrıca Smidge ile ilgili güncel gelişmeleri takip etmek için github adresinide takip edebilirsiniz.

Smidge Kütüphanesiyle Harici Dosyaların(JS, CSS) Boyutlarını Küçültme
İlk olarak Smidge ile ilgili konfigürasyonların yapılması gerekmektedir. Bunun için ‘appsettings.json’ dosyası aşağıdaki gibi kullanılmaktadır;

{
  "smidge": {
    "dataFolder": "App_Data/Smidge",
    "version": 1
  }
}

Konfigürasyona göz atarsanız eğer ‘dataFolder’ ile sıkıştırılmış ve minimize edilmiş dosyaların nerede cacheleneceğini belirtiyoruz. Ayrıca ‘version’ ile ilgili sıkıştırılmış dosyaları versiyonluyoruz.

Ardından uygulamada Smidge’in kullanılabilmesi için ‘Startup.cs’ dosyasındaki ‘ConfigureServices’ metodu içerisinde ‘AddSmidge’ servisinin çağrılması gerekmektedir.

        public void ConfigureServices(IServiceCollection services)
        {
            .
            .
            .
            services.AddSmidge(Configuration.GetSection("smidge"));
            .
            .
            .
        }

Ve hemen ardından ‘Configure’ metodu içerisinde ‘UseEndpoints’ üzerinde aşağıdaki middleware’i çağırınız.

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            .
            .
            .
            app.UseSmidge(bundle =>
            {
                bundle.CreateJs("jsbundle", "~/js/islem1.js", "~/js/islem2.js");
                bundle.CreateCss("cssbundle", "~/css/style1.css", "~/css/style2.css");
            });
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
            .
            .
            .
        }

Bu işlemler neticesinde uygulama ayağa kaldırıldığında belirtilen JavaScript ve CSS dosyaları bundle edilecektir.

Bundle Edilmiş Harici Dosyaları Kullanma
İlk olarak bundle edilmiş dosyalara erişebilmek için Smidge taghelper’ının eklenmesi gerekmektedir.

@addTagHelper *, Smidge

Ardından harici dosyaların bundle edilmiş halleri referans gösterilmelidir.

    <link rel="stylesheet" href="cssbundle" />
    <script src="jsbundle"></script>

Uygulamayı ayağa kaldırdığınızda aşağıdaki gibi ilgili dosyaların bundle edildiğini göreceksiniz.
Asp.NET Core MVC - Smidge Kütüphanesiyle Bundle İşlemi

Solution Explorer penceresinede göz atarsanız eğer ‘App_Data’ klasörünün oluşturulduğunu ve içerisinde bundle edilmiş dosyaların cachelendiğini göreceksiniz.
Asp.NET Core MVC - Smidge Kütüphanesiyle Bundle İşlemi

Smidge Kütüphanesinde Debug Modu
Bazen gelişim sürecinde JavaScript dosyalarını debug edebilmek için bundle işleminin production ortamında gerçekleştirilmesini isteyebiliriz. Bunun için;

    <environment names="Development">
        <link rel="stylesheet" href="cssbundle" debug="true" />
        <script src="jsbundle" debug="true"></script>
    </environment>
    <environment names="Production">
        <link rel="stylesheet" href="cssbundle" />
        <script src="jsbundle"></script>
    </environment>

şeklinde çalışılması yeterli olacaktır. Dikkat edilirse eğer ‘Development’ ortamında ilgili referanslar ‘debug=”true”‘ attribute’u ile işaretlenmektedir. Böylece development ortamında debug modda script’i yükleyecek dolayısıyla bundle yapmayacaktır. Lakin ‘Production’ ortamında beklenen işlemleri gerçekleştirecek, dosyaların boyutlarını küçültecektir.

Development Production
Asp.NET Core MVC - Smidge Kütüphanesiyle Bundle İşlemi Asp.NET Core MVC - Smidge Kütüphanesiyle Bundle İşlemi

Ortama Göre Bundle Konfigürasyonunun Özelleştirilmesi
Yapılacak bundle operasyonunu aşağıdaki gibi özelleştirebilirsiniz.

                bundle.CreateJs("jsbundle", "~/js/islem1.js", "~/js/islem2.js")
                .WithEnvironmentOptions(Smidge.Options.BundleEnvironmentOptions.Create()
                .ForDebug(builder => builder
                    .EnableCompositeProcessing()
                    .EnableFileWatcher()
                    .SetCacheBusterType<Smidge.Cache.AppDomainLifetimeCacheBuster>()
                    .CacheControlOptions(enableEtag: false, cacheControlMaxAge: 0))
                    .Build());

Yapılanmayı incelersek eğer;

  • ForDebug;
    Belirtilecek ayarların debug mod için geçerli olacağı bildirilmektedir.
  • EnableCompositeProcessing;
    Harici dosyaların birleştirilmesi bildirilmektedir.
  • EnableFileWatcher;
    Cache’de ki bundle dosyalarının kaynaklarını takip etmesini ve bir değişiklik söz konusu olduğu taktirde tekrar oluşturması gerektiğini bildirmektedir.
  • SetCacheBusterType;
    Cache’in ne zaman oluşturulacağını bildirir. ‘AppDomainLifetimeCacheBuster’ nesnesi ile uygulamanın yaşam döngüsünde yani her ayağa kaldırıldığında cache’in tekrar oluşturularak tazelenmesini ifade eder.
  • CacheControlOptions;
    Uygulamanın cache konfigürasyonunu ifade eder.

    • enableEtag
      Browser server üzerinden herhangi bir dosya çektiği zaman server response içerisinde bir Etag gönderir. Token vazifesi gören bu Etag değeri ile browser sonraki yapacağı isteklerdeki davranışını belirler. Browser, yapılan isteklerde gelen Etag değerine göre ilgili dosyanın değişip, değişmediğini anlayacak ve böylece cookie’den okuyup okumayacağına karar verecektir. Eğer ki istek neticesinde gelen Etag bir öncekiyle aynı değerdeyse bu durumda 304 Status Code’u ile beraber body değeri boş dönecek, ilgili dosya cache’den okunacaktır. ‘false’ değeri verildiği taktirde Etag değerine bakılmaksızın ilgili dosyanın direkt olarak sunucudan çekilmesi bildirilmiş olacaktır.
    • cacheControlMaxAge
      İlgili dosyanın browser cache’inde ne kadar tutulacağı saniye cinsinden bildirilmektedir.
  • Build;
    Bu ayarlarla tüm yapılanma inşa edilmektedir.

Görüldüğü üzere Smidge kütüphanesinin debug moddaki davranışını yukarıdaki özelleştirmelerle değiştirmiş bulunmaktayız.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. baran dedi ki:

    anlatımlarınız çok güzel hep takip ediyorum lakin bu “app_data” klasörü oluşmadı bende birtürlü.

    • Gençay dedi ki:

      Merhaba,

      Configure metodunu ve taghelper tanımlamasını kontrol edebilir misiniz?

      • baran dedi ki:

        birebir aynı. bir defa “app_data” yerine başka bir şey yazmıştım o zaman geldi. sonra dedim ki en iyisi sileyim baştan “app_data” yapayım yoksa yolu falan karışır. Silip baştan yapayım dedim “app_data” şeklinde olmadı. İsmi dğeiştirip yine yaptım yine olmadı :D. Keşke olduğunda dğeiştirmeyeydim.

  2. baran dedi ki:

    Bazı sayfalarda kendi yazdığım script kodları var. yani .js dosyası halinde değil. Sanırım hata bundan kaynaklı.Sadece CSS için bu işlemleri yapsam da yeter bana şimdilik. Emeğiniz için teşekkürler.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*