ASP.Net Core 2 Web Optimizer ile CSS ve JS dosyalarını paketleyip sıkıştıralım


Merhaba arkadaşlar. Bu yazımda sizlerle Asp.net Core 2 için CSS ve JS dosyalarımızı paketleyip sıkıştırma (Bundle & Minified) işlemini yapma konusunda bilgiler vereceğim. Bu aralar yoğun tempomuzla koşuştururken optimizasyon kısmına elimizi attık. Bu arada Scott Hanselman ın bu konuda bir yazısnı bulup projede optimizasyon için bir sürü kod yazmaktan kurtarmasına sevindim.

Klasik Asp.Net Core Bundle ve minifie işlemlerini yapan sınıf Asp.Net MVC deki ile aynı mantıkla çalışmakta. Ancak sizinle paylaşacağım bu optimizer ile sizde benim gibi bir sürü yapılandırmadan kurtarmış olacaksınız. Eğer Core ile sizde proje geliştiriyorsanız kesinlikle tavsiye ederim.

Bu işleme başlamak için bir Asp.Net Core projesi oluşturun. Daha sonra Nuget üzerinden LigerShark.WebOptimizer.Core paketini projenize indirin.

public void ConfigureServices(IServiceCollection services)
 {
     services.AddMvc();
     services.AddWebOptimizer();
 }

Burada da görebileceğiniz gibi ConfigureServices fonksiyonunda AddWebOptimizer extension metodumuzu kullanmamız gerekiyor. Bu işlem bizim için css ve js dosyalarını otomatik olarak sıkıştırma işlemi yapıyor. Ne kadar güzel değil mi? Ancak bir şey unuttuk, uygulamamız bu servisi kullanabilmesi için middleware ihtiyaç duymakta.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseWebOptimizer();
        app.UseExceptionHandler("/Home/Error");
    }
}

Burada ise uygulama development modunda değil ise (ki developmentte sıkışıtrması dez avantaj olur) middleware yi tanıtmak için UseWebOptimizer statik metodunu ekliyoruz.

Eğer js dosyalarını bağımlılıklarından dolayı sıralamak isterseniz aşağıdaki overload metodu kullanmanızı tavsiye ederim. Bu yöntem ile sırası ile bir pipeline a sıralamayı belirtebilirsiniz.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddWebOptimizer(pipeline =>
    {
        pipeline.MinifyJsFiles("js/a.js", "js/b.js", "js/c.js");
    });
}

Tabi eğer klasik bundle deki gibi belirteceğiniz css dosyalarını birleştirip bir css dosyası olarak çıkarmak için şu yöntemi de kullanmak mümkün.

services.AddWebOptimizer(pipeline =>
{
    pipeline.AddCssBundle("/css/mybundle.css", "css/*.css");
});

Bu şekilde de css dosyaları mybundle.css olarak export edilmiş oldu. Daha fazla bilgi ve projeyi incelemek için şu adresi ziyaret edebilirsiniz.

https://github.com/ligershark/WebOptimizer

Bu yazı 1117 defa görüntülendi

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Yazar Hakkında

15 yıllık çalışma hayatında birçok proje geliştirmiş binlerce projeyi inceleme fırsatı bulmuş yazılım aşığıdır. İşini hobi olarak gören yazarımız iş hayatını profesyonelce zevkle sürdürmektedir.

Son Eklenenler