Paketleme ve Küçültme

tarafından Rick Anderson

Paketleme ve küçültme, istek yükleme süresini geliştirmek için ASP.NET 4.5'te kullanabileceğiniz iki tekniktir. Paketleme ve küçültme, sunucuya yönelik istek sayısını azaltarak ve istenen varlıkların (CSS ve JavaScript gibi) boyutunu azaltarak yükleme süresini artırır.

Geçerli ana tarayıcıların çoğu, her konak adı başına eşzamanlı bağlantı sayısını altı ile sınırlar. Bu, altı istek işlenirken bir konak üzerindeki varlıklar için ek isteklerin tarayıcı tarafından kuyruğa alınacağı anlamına gelir. Aşağıdaki görüntüde, IE F12 geliştirici araçları ağ sekmeleri örnek bir uygulamanın Hakkında görünümünde gereken varlıkların zamanlamasını gösterir.

Gri çubuklar, isteğin altı bağlantı sınırında bekleyen tarayıcı tarafından kuyruğa alındığı zamanı gösterir. Sarı çubuk, ilk bayt için istek süresidir, yani isteği göndermek ve sunucudan ilk yanıtı almak için geçen süredir. Mavi çubuklar, yanıt verilerini sunucudan almak için geçen süreyi gösterir. Ayrıntılı zamanlama bilgilerini almak için bir varlığa çift tıklayabilirsiniz. Örneğin, aşağıdaki görüntüde /Scripts/MyScripts/JavaScript6.js dosyasını yüklemeye yönelik zamanlama ayrıntıları gösterilmektedir.

Yukarıdaki görüntüde, tarayıcının eşzamanlı bağlantı sayısını sınırlaması nedeniyle isteğin kuyruğa alındığı zamanı veren Start olayı gösterilir. Bu durumda, istek 46 milisaniye boyunca kuyruğa alındı ve başka bir isteğin tamamlanması bekleniyordu.

Paketleme

Paketleme, ASP.NET 4.5 sürümünde birden çok dosyayı tek bir dosyada birleştirmeyi veya paketlemeyi kolaylaştıran yeni bir özelliktir. CSS, JavaScript ve diğer paketleri oluşturabilirsiniz. Daha az dosya, daha az HTTP isteği anlamına gelir ve bu da ilk sayfa yükleme performansını geliştirebilir.

Aşağıdaki görüntüde, daha önce gösterilen Hakkında görünümünün aynı zamanlama görünümü gösterilmektedir, ancak bu kez paketleme ve küçültme etkinleştirilmiştir.

Minification

Küçültme, betikler veya css için gereksiz boşluk ve açıklamaları kaldırma ve değişken adlarını bir karaktere kısaltma gibi çeşitli kod iyileştirmeleri gerçekleştirir. 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üçültmeden sonra işlev aşağıdakine indirilir:

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

Açıklamaları ve gereksiz boşlukları kaldırmaya ek olarak, aşağıdaki parametreler ve değişken adları aşağıdaki gibi yeniden adlandırıldı (kısaltıldı):

Özgün	Yeni -den adlandır
imageTagAndImageID	n
imageContext	t
imageElement	ı

Paketleme ve Küçültmenin Etkisi

Aşağıdaki tabloda, tüm varlıkları tek tek listeleme ile örnek programda paketleme ve küçültme (B/M) kullanma arasındaki birkaç önemli fark gösterilmektedir.

	B/M kullanma	B/M olmadan	Değiştir
Dosya İstekleri	9	34	256%
KB Gönderildi	3.26	11.92	266%
KB Alındı	388.51	530	%36
Yükleme Süresi	510 MS	780 MS	53%

Tarayıcılar isteklere uyguladıkları HTTP üst bilgileriyle oldukça ayrıntılı olduğundan gönderilen baytların paketlemede önemli bir azalma oldu. En büyük dosyalar (Scripts\jquery-ui-1.8.11.min.js ve Scripts\jquery-1.7.1.min.js) zaten küçültülmüş olduğundan alınan bayt azaltması o kadar büyük değildir. Not: Örnek programdaki zamanlamalar, yavaş bir ağın benzetimini yapmak için Fiddler aracını kullandı. (Fiddler'dan Kurallar menüsünde Performans'ı ve ardından Modem Hızlarını Benzet'i seçin.)

Paketlenmiş ve Küçültüldü JavaScript Hatalarını Ayıklama

JavaScript dosyaları paketlenmediğinden veya küçültülmediğinden, JavaScript'inizin hatalarını geliştirme ortamında (Web.config dosyasındaki derleme Öğesi olarak ayarlandığında debug="true" ) ayıklamak kolaydır. JavaScript dosyalarınızın paketlendiği ve küçültüldüğü bir yayın derlemesinde de hata ayıklayabilirsiniz. IE F12 geliştirici araçlarını kullanarak, aşağıdaki yaklaşımı kullanarak küçültüldü paketinde bulunan javascript işlevinin hatalarını ayıklarsınız:

1. Betik sekmesini ve ardından Hata ayıklamayı başlat düğmesini seçin.
2. Varlıklar düğmesini kullanarak hata ayıklamak istediğiniz JavaScript işlevini içeren paketi seçin.
   
3. Yapılandırma düğmesini ve ardından JavaScript Biçimlendir'i seçerek küçültüldü JavaScript'i biçimlendirin.
4. Betik Ara giriş kutusunda, hata ayıklamak istediğiniz işlevin adını seçin. Aşağıdaki görüntüde, Arama Betiği giriş kutusuna AddAltToImg girildi.
   

F12 geliştirici araçlarıyla hata ayıklama hakkında daha fazla bilgi için JavaScript Hatalarını Ayıklamak için F12 Geliştirici Araçlarını Kullanma MSDN makalesine bakın.

Paketleme ve Küçültmeyi Denetleme

Paketleme ve küçültme, Web.config dosyasındaki compilation Öğesindeki debug özniteliğinin değeri ayarlanarak etkinleştirilir veya devre dışı bırakılır. Aşağıdaki XML'de, debug paketleme ve küçültmenin devre dışı bırakılması için true olarak ayarlanmıştır.

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

Paketleme ve küçültmeyi etkinleştirmek için değeri "false" olarak ayarlayın debug . Web.config ayarını sınıfındaki BundleTable EnableOptimizations özelliğiyle geçersiz kılabilirsiniz. Aşağıdaki kod paketleme ve küçültmeyi etkinleştirir ve Web.config dosyasındaki tüm ayarları geçersiz kılar.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
    BundleTable.EnableOptimizations = true;
}

Not

true Değilse veya Web.config dosyasındaki compilation Öğesindeki debug özniteliği olarak falseayarlanmadıysaEnableOptimizations, dosyalar paketlenmez veya küçültülmeyecektir. Ayrıca, dosyaların .min sürümü kullanılmaz, tam hata ayıklama sürümleri seçilir. EnableOptimizationsWeb.config dosyasındaki compilation Öğesinde hata ayıklama özniteliğini geçersiz kılar

ASP.NET Web Forms ve Web Sayfaları ile Paketleme ve Küçültme Kullanma

• Web Sayfaları için, Web Sayfaları Sitesine Web İyileştirme Ekleme blog girdisine bakın.
• Web Forms için Bkz. Web Forms'a Paketleme ve Küçültme Ekleme blog girdisi.

ASP.NET MVC ile Paketleme ve Küçültme Kullanma

Bu bölümde paketleme ve küçültmeyi incelemek için bir ASP.NET MVC projesi oluşturacağız. İlk olarak, varsayılan değerlerden herhangi birini değiştirmeden MvcBM adlı yeni bir ASP.NET MVC internet projesi oluşturun.

App\_Start\BundleConfig.cs dosyasını açın ve paket oluşturmak, kaydetmek ve yapılandırmak için kullanılan yöntemi inceleyinRegisterBundles. Aşağıdaki kod yöntemin RegisterBundles bir bölümünü gösterir.

public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
         // Code removed for clarity.
}

Yukarıdaki kod, tüm uygun (hata ayıklama veya küçültüldü ama değil) içeren ~/bundles/jquery adlı yeni bir JavaScript paketi oluşturur.vsdoc) dosyaları Betikler klasöründeki "~/Scripts/jquery-{version}.js" joker dizesiyle eşleşir. ASP.NET MVC 4 için bu, hata ayıklama yapılandırmasıyla birlikte dosya jquery-1.7.1.js pakete eklendiği anlamına gelir. Bir sürüm yapılandırmasında jquery-1.7.1.min.js eklenir. Paketleme çerçevesi aşağıdakiler gibi bazı yaygın kuralları izler:

• FileX.min.js ve FileX.js mevcut olduğunda yayın için ".min" dosyasını seçme.
• Hata ayıklama için ".min" olmayan sürümü seçme.
• Yalnızca IntelliSense tarafından kullanılan "-vsdoc" dosyalarını (jquery-1.7.1-vsdoc.js gibi) yoksayma.

{version} Yukarıda gösterilen joker karakter eşleştirmesi, Script klasörünüzde uygun jQuery sürümüne sahip bir jQuery paketini otomatik olarak oluşturmak için kullanılır. Bu örnekte joker karakter kullanmak aşağıdaki avantajları sağlar:

• NuGet kullanarak görünüm sayfalarınızdaki önceki paketleme kodunu veya jQuery başvurularını değiştirmeden daha yeni bir jQuery sürümüne güncelleştirmenizi sağlar.
• Hata ayıklama yapılandırmaları için tam sürümü ve yayın derlemeleri için ".min" sürümünü otomatik olarak seçer.

CDN kullanma

Aşağıdaki kod, yerel jQuery paketini bir CDN jQuery paketiyle değiştirir.

public static void RegisterBundles(BundleCollection bundles)
{
    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    //            "~/Scripts/jquery-{version}.js"));

    bundles.UseCdn = true;   //enable CDN support

    //add link to jquery on the CDN
    var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

    bundles.Add(new ScriptBundle("~/bundles/jquery",
                jqueryCdnPath).Include(
                "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
}

Yukarıdaki kodda, sürüm modundayken jQuery CDN'den istenir ve jQuery'nin hata ayıklama sürümü hata ayıklama modunda yerel olarak getirilir. CDN kullanırken, CDN isteğinin başarısız olması durumunda bir geri dönüş mekanizmasına sahip olmanız gerekir. Düzen dosyasının sonundaki aşağıdaki işaretleme parçası, CDN'nin başarısız olması halinde istek jQuery'ye eklenen betiği gösterir.

</footer>

        @Scripts.Render("~/bundles/jquery")

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script> 

        @RenderSection("scripts", required: false)
    </body>
</html>

Paket Oluşturma

Bundle sınıf Include yöntemi, her dizenin kaynağa yönelik sanal bir yol olduğu bir dize dizisi alır. App\_Start\BundleConfig.cs dosyasındaki yönteminden RegisterBundles alınan aşağıdaki kod, bir pakete birden çok dosyanın nasıl eklendiğini gösterir:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

Bundle sınıfı IncludeDirectory yöntemi, bir dizindeki (ve isteğe bağlı olarak tüm alt dizinlerdeki) arama deseni ile eşleşen tüm dosyaları eklemek için sağlanır. Paket sınıfı IncludeDirectory API'si aşağıda gösterilmiştir:

public Bundle IncludeDirectory(
    string directoryVirtualPath,  // The Virtual Path for the directory.
    string searchPattern)         // The search pattern.

public Bundle IncludeDirectory(
    string directoryVirtualPath,  // The Virtual Path for the directory.
    string searchPattern,         // The search pattern.
    bool searchSubdirectories)    // true to search subdirectories.

Görünümlerde, (Styles.Render CSS ve Scripts.Render JavaScript için) İşleme yöntemi kullanılarak paketlere başvurulur. Views\Shared\_Layout.cshtml dosyasındaki aşağıdaki işaretleme, varsayılan ASP.NET internet projesi görünümlerinin CSS ve JavaScript paketlerine nasıl başvurarak başvurarak gösterildiğini gösterir.

<!DOCTYPE html>
<html lang="en">
<head>
    @* Markup removed for clarity.*@    
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @* Markup removed for clarity.*@
   
   @Scripts.Render("~/bundles/jquery")
   @RenderSection("scripts", required: false)
</body>
</html>

İşleme yöntemlerinin bir dizi dize aldığına dikkat edin, böylece tek bir kod satırına birden çok paket ekleyebilirsiniz. Genellikle, varlığa başvurmak için gerekli HTML'yi oluşturan İşleme yöntemlerini kullanmak istersiniz. Yöntemini kullanarak Url , varlığa başvurmak için gereken işaretleme olmadan varlığın URL'sini oluşturabilirsiniz. Yeni HTML5 zaman uyumsuz özniteliğini kullanmak istediğinizi varsayalım. Aşağıdaki kod, yöntemini kullanarak modernizr'e nasıl başvuracaklarını Url gösterir.

<head>
    @*Markup removed for clarity*@
    <meta charset="utf-8" />
    <title>@ViewBag.Title - MVC 4 B/M</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")

   @* @Scripts.Render("~/bundles/modernizr")*@

    <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>
</head>

Dosyaları Seçmek için "*" Joker Karakterini Kullanma

yönteminde Include belirtilen sanal yol ve yöntemdeki arama deseni, son yol kesiminde IncludeDirectory önek veya sonek olarak bir "*" joker karakteri kabul edebilir. Arama dizesi büyük/küçük harfe duyarsız. yöntemi, IncludeDirectory alt dizinleri arama seçeneğine sahiptir.

Aşağıdaki JavaScript dosyalarına sahip bir proje düşünün:

• Scripts\Common\AddAltToImg.js
• Script\Common\ToggleDiv.js
• Script\Common\ToggleImg.js
• Scripts\Common\Sub1\ToggleLinks.js

Aşağıdaki tabloda, gösterildiği gibi joker karakter kullanılarak bir pakete eklenen dosyalar gösterilmektedir:

Çağırmak	Eklenen Dosyalar veya Özel Durum TetiklenenLer
Include("~/Scripts/Common/*.js")	AddAltToImg.js, ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/T*.js")	Geçersiz desen özel durumu. Joker karaktere yalnızca ön ekte veya son ekte izin verilir.
Include("~/Scripts/Common/*og.*")	Geçersiz desen özel durumu. Yalnızca bir joker karaktere izin verilir.
Include("~/Scripts/Common/T*")	ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/*")	Geçersiz desen özel durumu. Saf joker karakter kesimi geçerli değil.
IncludeDirectory("~/Scripts/Common", "T*")	ToggleDiv.js, ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*", true)	ToggleDiv.js, ToggleImg.js, ToggleLinks.js

Her dosyayı açıkça bir pakete eklemek genellikle aşağıdaki nedenlerden dolayı dosyaların joker karakter yüklemesine göre tercih edilir:

• Betikleri joker karaktere göre eklemek, normalde istediğiniz gibi alfabetik sırada yüklemek için varsayılan olarak kullanılır. CSS ve JavaScript dosyalarının genellikle belirli bir (alfabetik olmayan) sırada eklenmesi gerekir. Özel bir IBundleOrderer uygulaması ekleyerek bu riski azaltabilirsiniz, ancak her dosyayı açıkça eklemek daha az hataya açıktır. Örneğin, gelecekte IBundleOrderer uygulamanızı değiştirmenizi gerektirebilecek bir klasöre yeni varlıklar ekleyebilirsiniz.

• Joker karakter yüklemesini kullanarak dizine eklenen belirli dosyaları görüntüleme, bu pakete başvuran tüm görünümlere eklenebilir. Görünüme özgü betik bir pakete eklenirse, pakete başvuran diğer görünümlerde JavaScript hatası alabilirsiniz.

• Diğer dosyaları içeri aktaran CSS dosyaları, içeri aktarılan dosyaların iki kez yüklenmesine neden olur. Örneğin, aşağıdaki kod çoğu jQuery UI teması CSS dosyasının iki kez yüklendiği bir paket oluşturur.

  bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
      .IncludeDirectory("~/Content/themes/base", "*.css"));
  

  "*.css" joker karakter seçici, content\themes\base\jquery.ui.all.css dosyası da dahil olmak üzere klasördeki her CSS dosyasını getirir. jquery.ui.all.css dosyası diğer CSS dosyalarını içeri aktarır.

Paket Önbelleğe Alma

Paketler, paket oluşturulduğundan itibaren bir yıl sonra HTTP Süresi Doluyor Üst Bilgisini ayarlar. Daha önce görüntülenen bir sayfaya giderseniz Fiddler, IE'nin paket için koşullu istekte bulunmadığını, yani paket için IE'den HTTP GET isteği olmadığını ve sunucudan HTTP 304 yanıtı olmadığını gösterir. IE'yi F5 anahtarıyla her paket için koşullu istekte bulunmaya zorlayabilirsiniz (bu da her paket için bir HTTP 304 yanıtıyla sonuçlanır). ^F5 kullanarak tam yenilemeyi zorlayabilirsiniz (sonuçta her paket için bir HTTP 200 yanıtı elde edebilirsiniz.)

Aşağıdaki görüntüde Fiddler yanıt bölmesinin Önbelleğe Alma sekmesi gösterilmektedir:

İstek
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
, AllMyScripts paketine yöneliktir ve v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81 bir sorgu dizesi çifti içerir. v sorgu dizesinin, önbelleğe alma için kullanılan benzersiz bir tanımlayıcı olan bir değer belirteci vardır. Paket değişmediği sürece, ASP.NET uygulaması bu belirteci kullanarak AllMyScripts paketini talep eder. Paketteki herhangi bir dosya değişirse, ASP.NET iyileştirme çerçevesi yeni bir belirteç oluşturur ve paket için tarayıcı isteklerinin en son paketi edineceğini garanti eder.

IE9 F12 geliştirici araçlarını çalıştırır ve daha önce yüklenmiş bir sayfaya giderseniz, IE her pakete yapılan koşullu GET isteklerini ve HTTP 304 döndüren sunucuyu yanlış gösterir. Web Sitesi Performansını Geliştirmek için CDN'leri kullanma ve Süre Sonu bilgilerini kullanarak blog girdisinde IE9'un koşullu istek yapılıp yapılmadığını belirleme konusunda neden sorunlarla karşılaştığını okuyabilirsiniz.

LESS, CoffeeScript, SCSS, Sass Bundling.

Paketleme ve küçültme çerçevesi SCSS, Sass, LESS veya Coffeescript gibi ara dilleri işlemek ve sonuçta elde edilen pakete küçültme gibi dönüşümler uygulamak için bir mekanizma sağlar. Örneğin, MVC 4 projenize .less dosyaları eklemek için:

1. LESS içeriğiniz için bir klasör oluşturun. Aşağıdaki örnekte Content\MyLess klasörü kullanılır.

2. Projenize .less NuGet paketini noktasız olarak ekleyin.
   

3. IBundleTransform arabirimini uygulayan bir sınıf ekleyin. .less dönüşümü için projenize aşağıdaki kodu ekleyin.

   using System.Web.Optimization;
   
   public class LessTransform : IBundleTransform
   {
       public void Process(BundleContext context, BundleResponse response)
       {
           response.Content = dotless.Core.Less.Parse(response.Content);
           response.ContentType = "text/css";
       }
   }
   

4. ve CssMinify dönüşümüyle LessTransform LESS dosyalarından oluşan bir paket oluşturun. App\_Start\BundleConfig.cs dosyasında yöntemine aşağıdaki kodu RegisterBundles ekleyin.

   var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less");
   lessBundle.Transforms.Add(new LessTransform());
   lessBundle.Transforms.Add(new CssMinify());
   bundles.Add(lessBundle);
   

5. LESS paketine başvuran tüm görünümlere aşağıdaki kodu ekleyin.

   @Styles.Render("~/My/Less");
   

PaketLe İlgili Dikkat Edilmesi Gerekenler

Paket oluştururken izleyebileceğiniz iyi bir kural, paket adına ön ek olarak "bundle" eklemektir. Bu, olası bir yönlendirme çakışmasını engeller.

Paketteki bir dosyayı güncelleştirdikten sonra paket sorgu dizesi parametresi için yeni bir belirteç oluşturulur ve istemci paketi içeren bir sayfayı bir sonraki isteğinde tam paketin indirilmesi gerekir. Her varlığın ayrı ayrı listelendiği geleneksel işaretlemelerde yalnızca değiştirilen dosya indirilir. Sık değişen varlıklar paketleme için iyi aday olmayabilir.

Paketleme ve küçültme öncelikli olarak ilk sayfa isteği yükleme süresini geliştirir. Web sayfası istendikten sonra tarayıcı varlıkları (JavaScript, CSS ve görüntüler) önbelleğe alır, bu nedenle paketleme ve küçültme aynı sayfayı isterken veya aynı sitedeki sayfalar aynı varlıkları isterken herhangi bir performans artışı sağlamaz. Varlıklarınızda süre sonu üst bilgisini doğru ayarlamazsanız ve paketleme ve küçültmeyi kullanmıyorsanız, tarayıcıların güncellik buluşsal yöntemleri birkaç gün sonra varlıkları eski olarak işaretler ve tarayıcı her varlık için bir doğrulama isteği gerektirir. Bu durumda paketleme ve küçültme, ilk sayfa isteğinden sonra performans artışı sağlar. Ayrıntılar için, Web Sitesi Performansını Geliştirmek için CDN'leri kullanma ve Süre Sonu bloguna bakın.

Her ana bilgisayar adı başına altı eşzamanlı bağlantının tarayıcı sınırlaması, CDN kullanılarak azaltılabilir. CDN barındırma sitenizden farklı bir ana bilgisayar adına sahip olacağı için, CDN'den gelen varlık istekleri barındırma ortamınıza yönelik altı eşzamanlı bağlantı sınırına karşı sayılmaz. CDN, ortak paket önbelleğe alma ve kenar önbelleğe alma avantajları da sağlayabilir.

Paketler, ihtiyacı olan sayfalara göre bölümlenmelidir. Örneğin, bir İnternet uygulaması için varsayılan ASP.NET MVC şablonu, jQuery'den ayrı bir jQuery Doğrulama paketi oluşturur. Oluşturulan varsayılan görünümlerin girişi olmadığından ve değerleri göndermediğinden, doğrulama paketini içermez.

Ad System.Web.Optimization alanı System.Web.Optimization.dll uygulanır. Küçültme özellikleri için WebGrease kitaplığından (WebGrease.dll) yararlanarak Antlr3.Runtime.dll kullanır.

Twitter'ı hızlı gönderiler yapmak ve bağlantıları paylaşmak için kullanıyorum. Twitter tanıtıcım: @RickAndMSFT

Ek kaynaklar

• Video:Howard Dierking tarafından paketleme ve iyileştirme
• Web Sayfaları Sitesine Web İyileştirme ekleme.
• Web Forms'a Paketleme ve Küçültme ekleme.
• Henrik F Nielsen @frystyk Tarafından Web Gözatmada Paketleme ve Küçültmenin Performans Etkileri
• Rick Anderson @RickAndMSFT Tarafından Web Sitesi Performansını Geliştirmek için CDN'leri ve Süreleri Kullanma
• RTT'i simge durumuna küçültme (gidiş dönüş süreleri)

Katkıda Bulunanlar

• Hao Kung
• Howard Dierking
• Diana LaRose