Statik varlıkları paketle ve minimuma ASP.NET Core

Scott Addie ve David Pine

Bu makalede, bu özelliklerin web uygulamalarıyla nasıl kullanılası da dahil olmak üzere, ASP.NET Core avantajları açıklanmıştır.

Bundling ve minification nedir?

Bundling ve minification, bir web uygulamasında uygulayabilecek iki farklı performans iyileştirmesidir. Birlikte kullanılan, bundling ve minification, sunucu isteklerinin sayısını azaltarak ve istenen statik varlıkların boyutunu azaltarak performansı artırır.

Bundling ve minification öncelikli olarak ilk sayfa isteği yükleme sürelerini iyiler. Bir web sayfası isteği alındıktan sonra tarayıcı statik varlıkları (JavaScript, CSS ve görüntüler) önbelleğe alır. Bu nedenle, aynı site üzerinde aynı varlıkların talepte bulunarak aynı sayfayı veya sayfaları talep etme performansını artırmaz. Varlıklarda expires üst bilgisi doğru ayarlanmasa ve budama ve minification kullanılmazsa tarayıcının yenilik verimleri, varlıkların birkaç gün sonra eski olduğunu gösterir. Buna ek olarak, tarayıcı her varlık için bir doğrulama isteği gerektirir. Bu durumda, bundling ve minification, ilk sayfa isteğine rağmen bir performans geliştirmesi sağlar.

Bundling (Bundling)

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

Minification

Minification işlevi değiştirmeden gereksiz karakterleri koddan kaldırır. Sonuç olarak istenen varlıklarda (CSS, görüntüler ve JavaScript dosyaları gibi) önemli bir boyut düşüşü olur. Minification'ın yaygın yan etkileri, değişken adlarının bir karaktere kısaltılması ve açıklama ve gereksiz boşlukların kaldırılmasıdır.

Aşağıdaki JavaScript işlevini düşünün:

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/, ''));
}

Minification işlevi aşağıdakine azaltır:

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

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

Bundling ve minification etkisi

Aşağıdaki tabloda, varlıkları tek tek yükleme ile gruplama ve minification kullanma arasındaki farklar özetleniyor:

Tarayıcılar HTTP isteği üst bilgileriyle ilgili oldukça ayrıntılıdır. Gönderilen toplam bayt sayısı ölçümü, bundling'de önemli bir azalma olduğunu görmüştür. Yükleme süresi önemli bir geliştirme gösterir, ancak bu örnek yerel olarak dı. Bir ağ üzerinden aktarılan varlıklarla birlikte, bundling ve minification kullanılırken daha fazla performans kazancı elde edildi.

Bir bundling ve minification stratejisi seçme

ASP.NET Core, açık kaynak bir modelleme ve minification çözümü olan WebOptimizer ile uyumludur. Yönergeleri ve örnek projeleri ayarlamak için bkz. WebOptimizer. ASP.NET Core, yerel bir modelleme ve minification çözümü sağlamaz.

Gulp ve Webpackgibi üçüncü taraf araçlar paketleme ve minification için iş akışı otomasyonu, lint ve görüntü iyileştirme sağlar. Tasarım zamanı dağıtım ve minimumlaştırma kullanılarak, en küçük dosyalar uygulamanın dağıtımından önce oluşturulur. Dağıtımdan önce gruplama ve azaltma, azaltılmış sunucu yükünün avantajını sağlar. Ancak tasarım zamanı ve minimumlaştırmanın derleme karmaşıklığını artırdığını ve yalnızca statik dosyalarla çalıştığının farkında olmak önemlidir.

Ortam tabanlındling and minification

En iyi uygulama olarak, uygulamanın paketlenmiş ve en küçük 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ümlerinize Ortam Etiketi Yardımcı'sı kullanarak sayfalarınıza hangi dosyaların dahil olduğunu belirtin. Ortam Etiketi Yardımcısı yalnızca belirli ortamlarda çalıştırılacak şekilde içeriklerini işler.

Aşağıdaki environment etiket, ortamda çalıştırıldıklarında işlenmemiş CSS dosyalarını Development 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 bir ortamda çalıştırıldıklarında paketlenmiş ve en küçük CSS dosyalarını Development işler. Örneğin, veya içinde Production Staging çalıştırarak şu stil sayfaları işlemeyi 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ı