ASP.NET Core Javascript ve Css Sıkıştırması Nasıl Yapılır ?

Web sitelerinin en büyük sorunu internet ortamında ağ akışının fazla olması. Eklenen css, javascript ve hatta html boyutları ne kadar yükselirse web sitesinin o kadar geç açılmasına neden olmaktadır. Bu durumla alakalı bu yazımızda css ve javascript dosyalarını nasıl küçültebileceğimizi ve nasıl sıkıştırabileceğimizi öğreneceğiz.

Öncelikle BundleConfig‘den başlayalım. Bu yapılandırma dosyası varolan dosyalarınızı sıkıştırmanıza yarıyor. Projemize BuildBundlerMinifier paketini ekleyerek başlayabiliriz.

PM> Install-Package BuildBundlerMinifier

Veya bunu Manage Nuget Package üzerinden ekleyebilirsiniz

Bu paketi yükledikten sonra yapmanız gereken yeni bir JSON dosyası eklemek. Adını “bundleconfig.json” olarak adlandırmanız önemli. Örnek json dosyası aşağıdaki gibi olmalı.

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/uikit.min.css",
      "wwwroot/css/site.css"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true,
      "commentMode": "none"
    }
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/jquery-2.2.4.min.js",
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true,
      "commentMode": "none"
    },
    "sourceMap": false
  }
]

Projenizi build aldığınızda Output panelinde şu şekilde yazılar göreceksiniz;

Bundler: Begin processing bundleconfig.json
Bundler: Done processing bundleconfig.json

Bu sizin yukarıdaki json dosyasında belirlemiş olduğunuz javascript, css dosyalarını otomatik olarak sıkıştırdığını belirtmektedir. Bu json dosyasında “outputFileName” alanı oldukça önemli bir nokta. Buraya yazacağınız adres, artık sizin html içerisinde kullanacağınız yeni dosya adresiniz olacak. Örneğin;

<link href="~/css/site.min.css" rel="stylesheet" />

Sonraki adım ise bu sıkıştırılmış css veya javascript dosyasını “gzip” yöntemi ile sıkıştırmak. Öncelikle yine bir paket daha yüklememiz gerekiyor. Bu paketin adı “Microsoft.AspNetCore.ResponseCompression”. Yukarıdaki örneklere bakarak bu paketi de projenize ekleyebilirsiniz.

Sonrasında projenizde bulunan Startup.cs dosyasında bir takım değişiklikler yapmanız gerekiyor. Aşağıdaki kodu “public void ConfigureServices(IServiceCollection services)” methodunun içerisine ekleyin. Bu kod sunucunuza gelen isteklerin cevaplarını sıkıştırmanıza yarayacak olan kısımdır.

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

Daha sonrasında ise public void Configure(IApplicationBuilder app) methoduna bu yukarıdaki kodu aktif edebilmemiz için gerekli kodu ekliyoruz.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseResponseCompression();
    app.UseMvc();
}

Örnek olarak herhangi bir controller sınıfınıza aşağıdaki kodu ekleyin

Startup[HttpGet]
public IEnumerable<string> Get()
{
    List<string> lstString = new List<string>();
    for (int i=1; i<= 100; i++)
    {
        lstString.Add("Value " + i.ToString());
    }
    return lstString;
}

Startup.cs içerisine kodları eklemeden önce denediğinizde aşağıdaki sonucu alacaksınız;

Startup.cs içerisine ilgili kodlar eklendikten sonraki sonuçlar;

Ayrıca Startup.cs içerisinde daha detaylı ayarlar yaparak sitenizi uygun hale getirebilirsiniz.

• Optimal: İşlemin tamamlanması daha uzun sürse bile, sıkıştırma işlemi en uygun şekilde sıkıştırılmalıdır.
• Fastest: Ortaya çıkan dosya en iyi şekilde sıkıştırılmamış olsa bile sıkıştırma işlemi mümkün olduğu kadar çabuk tamamlanmalıdır.
• NoCompression: Dosya üzerinde sıkıştırma yapılmamalıdır.

services.Configure<GzipCompressionProviderOptions>(options =>
          options.Level = System.IO.Compression.CompressionLevel.Optimal);
services.AddResponseCompression(options =>
{
    options.Providers.Add<GzipCompressionProvider>();
});

Https için aktif hale getriebilirsiniz;

services.AddResponseCompression(options =>
{
    options.EnableForHttps = true;
    options.Providers.Add<GzipCompressionProvider>();
});

“Mime Type” için özelleştirme yapabilirsiniz

public static readonly IEnumerable<string> MimeTypes = new[]
{
    // General
    "text/plain",
    // Static files
    "text/css",
    "application/javascript",
    // MVC
    "text/html",
    "application/xml",
    "text/xml",
    "application/json",
    "text/json",
};
services.AddResponseCompression(options =>
{
   options.EnableForHttps = true;
   options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
                            {
                               "image/svg+xml",
                               "application/atom+xml"
                            });;
   options.Providers.Add<GzipCompressionProvider>();
});

Şimdilik bu kadar. Daha sonrasında bu css ve javascript dosyaları zip haline getirip boyutlarını daha da azaltarak tarayıcıların anlayacağı hale getireceğiz.

Takipte kalın.