ASP.NET Core'da statik varlıkları paketleme ve küçültme

Tarafından Scott Addie ve David Pine

Bu makalede, bu özelliklerin ASP.NET Core web uygulamalarıyla nasıl kullanılabilebileceği de dahil olmak üzere paketleme ve küçültme uygulama avantajları açıklanmaktadır.

Paketleme ve küçültme nedir?

Paketleme ve küçültme, bir web uygulamasında uygulayabileceğiniz iki ayrı performans iyileştirmesidir. Birlikte kullanıldığında paketleme ve küçültme, sunucu isteklerinin sayısını azaltarak ve istenen statik varlıkların boyutunu azaltarak performansı artırır.

Paketleme ve küçültme öncelikli olarak ilk sayfa isteği yükleme süresini geliştirir. Bir web sayfası istendikten sonra tarayıcı statik varlıkları (JavaScript, CSS ve görüntüler) önbelleğe alır. Bu nedenle paketleme ve küçültme, aynı sitede aynı varlık isteğinde bulunan aynı sayfayı veya sayfaları isterken performansı iyileştirmez. Süre sonu üst bilgisi varlıklarda doğru ayarlanmamışsa ve paketleme ve küçültme kullanılmıyorsa tarayıcının güncellik buluşsal yöntemleri varlıkları birkaç gün sonra eski olarak işaretler. Ayrıca, tarayıcı her varlık için bir doğrulama isteği gerektirir. Bu durumda paketleme ve küçültme, ilk sayfa isteğinden sonra bile performans artışı sağlar.

Paketleme

Paketleme, birden çok dosyayı tek bir dosya halinde birleştirir. Paketleme, web sayfası gibi bir web varlığını işlemek için gereken sunucu isteklerinin sayısını azaltır. CSS, JavaScript vb. için özel olarak istediğiniz sayıda ayrı paket oluşturabilirsiniz. Daha az dosya, tarayıcıdan sunucuya veya uygulamanızı sağlayan hizmetten daha az HTTP isteği anlamına gelir. Bu, ilk sayfa yükleme performansının iyileştirilmesine neden olur.

Minification

Küçültme işlevi değiştirmeden gereksiz karakterleri koddan kaldırır. Sonuç, istenen varlıklarda (CSS, görüntüler ve JavaScript dosyaları gibi) önemli bir boyut azaltmasıdır. Küçültmenin yaygın yan etkileri arasında değişken adlarının bir karaktere kısaltılması ve açıklamaların ve gereksiz boşlukların kaldırılması yer alır.

Aşağıdaki JavaScript işlevini göz önünde bulundurun:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Küçültme işlevi şu şekilde azaltır:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Açıklamaları ve gereksiz boşlukları kaldırmaya ek olarak, aşağıdaki parametre ve değişken adları aşağıdaki şekilde yeniden adlandırıldı:

Paketleme ve küçültmenin etkisi

Aşağıdaki tabloda, varlıkları tek tek yükleme ile tipik bir web uygulaması için paketleme ve küçültme kullanma arasındaki farklar özetlenmiştir.

Yükleme süresi iyileştirildi, ancak bu örnek yerel olarak çalıştı. Ağ üzerinden aktarılan varlıklarla paketleme ve küçültme kullanılırken daha fazla performans kazancı elde edilir.

Yukarıdaki tabloda yer alan rakamları oluşturmak için kullanılan test uygulaması, belirli bir uygulama için geçerli olmayan tipik iyileştirmeleri gösterir. Paketleme ve küçültmenin iyileştirilmiş bir yük süresine neden olup olmadığını belirlemek için bir uygulamayı test etmenizi öneririz.

Paketleme ve küçültme stratejisi seçme

ASP.NET Core, açık kaynak paketleme ve küçültme çözümü olan WebOptimizer ile uyumludur. Kurulum yönergeleri ve örnek projeler için bkz . WebOptimizer. ASP.NET Core, yerel paketleme ve küçültme çözümü sağlamaz.

Gulp ve Webpack gibi üçüncü taraf araçlar paketleme ve küçültmenin yanı sıra lint ve görüntü iyileştirme için iş akışı otomasyonu sağlar. Paketleme ve küçültme kullanılarak, küçültülen dosyalar uygulamanın dağıtımından önce oluşturulur. Dağıtımdan önce paketleme ve küçültme, azaltılmış sunucu yükünün avantajını sağlar. Ancak paketleme ve küçültmenin derleme karmaşıklığını artırdığını ve yalnızca statik dosyalarla çalıştığını fark etmek önemlidir.

Ortam tabanlı paketleme ve küçültme

En iyi uygulama olarak, uygulamanızın paketlenmiş ve küçültüldü dosyaları bir üretim ortamında kullanılmalıdır. Geliştirme sırasında, özgün dosyalar uygulamanın hata ayıklamasını kolaylaştırır.

Görünümlerinizde Ortam Etiketi Yardımcısı'nı kullanarak sayfalarınıza eklenecek dosyaları belirtin. Ortam Etiketi Yardımcısı yalnızca belirli ortamlarda çalışırken içeriğini işler.

Aşağıdaki environment etiket, ortamda çalışırken Development işlenmemiş CSS dosyalarını işler:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Aşağıdaki environment etiket, dışında Developmentbir ortamda çalışırken paketlenmiş ve küçültüldü CSS dosyalarını işler. Örneğin, içinde Production çalışmak veya Staging bu stil sayfalarının işlenmesini tetikler:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Ek kaynaklar

• Birden çok ortam kullanma
• Etiket Yardımcıları