Paketleme ve Küçültme

Makale
07/13/2023

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 isteklerin sayısını azaltarak ve istenen varlıkların (CSS ve JavaScript gibi) boyutunu azaltarak yükleme süresini geliştirir.

Geçerli ana tarayıcıların çoğu, her ana bilgisayar adı başına eşzamanlı bağlantı sayısını altı ile sınırlandırıyor. Bu, altı istek işlenirken bir konakta 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.

B/M

Gri çubuklar, isteğin tarayıcı tarafından altı bağlantı sınırında sıraya 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.

Sol sütunda varlık isteği URL'leri ve sağ sütunda bunların zamanlamaları ile A S P noktaLı NET geliştirici araçları ağ sekmesini gösteren ekran görüntüsü.

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österilmektedir. Bu durumda istek, başka bir isteğin tamamlanmasını beklerken 46 milisaniye kuyruğa alındı.

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ı iyileş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.

I E F 12 geliştirici araçlarındaki varlığın zamanlama ayrıntıları sekmesini gösteren ekran görüntüsü. Başlangıç olayı vurgulanır.

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 indirgener:

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	Renamed
imageTagAndImageID	n
imageContext	t
imageElement	ı

Paketleme ve Küçültmenin Etkisi

Aşağıdaki tabloda, örnek programda tüm varlıkları tek tek listelemek ve paketleme ve küçültme (B/M) kullanmak arasında 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%

Gönderilen baytlar, tarayıcılar isteklere uyguladıkları HTTP üst bilgileriyle oldukça ayrıntılı olduğundan, 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 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ği veya küçültülmediği için JavaScript'inizin hatalarını geliştirme ortamında ayıklamak kolaydır (buradaWeb.config dosyasındaki derleme Öğesi olarak debug="true" ayarlanır). Ayrıca JavaScript dosyalarınızın paketlendiği ve küçültüldüğü bir yayın derlemesinde hata ayıklayabilirsiniz. IE F12 geliştirici araçlarını kullanarak, aşağıdaki yaklaşımı kullanarak küçültüldü paketine dahil edilen bir JavaScript işlevinde hata ayıklarsınız:

Betik sekmesini ve ardından Hata ayıklamayı başlat düğmesini seçin.
Varlıklar düğmesini kullanarak hata ayıklamak istediğiniz JavaScript işlevini içeren paketi seçin.
Yapılandırma düğmesi Yapılandırma düğmesi Resmi'ni ve ardından JavaScript'i Biçimlendir'i seçerek küçültüldü JavaScript'i biçimlendirin.
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ında Hata Ayıklamak için F12 Geliştirici Araçlarını Kullanma MSDN makalesine bakın.

Paketlemeyi 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 true debug olarak ayarlandığından paketleme ve küçültme devre dışı bırakılı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 . sınıfındaki özelliğiyle EnableOptimizationsBundleTableWeb.configayarını geçersiz kılabilirsiniz. Aşağıdaki kod paketlemeyi 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ığı süreceEnableOptimizations, dosyalar paketlenmez veya küçültülemez. 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 debug ö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 Web Forms'a Paketleme ve Küçültme ekleme blog girdisine bakın.

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 hiçbirini değiştirmeden MvcBM adlı yeni bir ASP.NET MVC internet projesi oluşturun.

App\_Start\BundleConfig.cs dosyasını açın ve paketleri 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 karakter dizesiyle eşleşir. MVC 4 ASP.NET için bu, hata ayıklama yapılandırmasında dosya jquery-1.7.1.js pakete eklendiği anlamına gelir. Yayın 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.jsgibi) yoksayma.

{version} Yukarıda gösterilen joker karakter eşleştirmesi, Scripts 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 bir sanal kaynak yolu 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"));

Bir dizindeki (ve isteğe bağlı olarak tüm alt dizinlerdeki) arama deseni ile eşleşen tüm dosyaları eklemek için Bundle sınıfı IncludeDirectory yöntemi 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.

Gruplara görünümlerde İşleme yöntemi kullanılarak başvurulur (Styles.Render CSS ve Scripts.Render JavaScript için). Views\Shared\_Layout.cshtml dosyasındaki aşağıdaki işaretlemede, varsayılan ASP.NET internet projesi görünümlerinin CSS ve JavaScript paketlerine nasıl başvur olduğu gösterilmektedir.

<!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 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 ön ek veya sonek olarak bir "*" joker karakter kabul edebilir. Arama dizesi büyük/küçük harfe duyarlı değildir. IncludeDirectory yöntemi, alt dizinleri arama seçeneğine sahiptir.

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

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

dir imag

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

Call	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ı bir pakete açıkça eklemek genellikle aşağıdaki nedenlerle dosyaların joker karakter yüklemesine göre tercih edilir:

Betiklerin joker karakterle eklenmesi varsayılan olarak alfabetik sırada yüklenir ve bu normalde istediğiniz şey değildir. CSS ve JavaScript dosyalarının sık sık belirli (alfabetik olmayan) bir 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ükleme 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üklenmesiyle sonuçlanır. Örneğin aşağıdaki kod, jQuery UI tema CSS dosyalarının çoğu iki kez yüklenmiş bir paket oluşturur.
```
bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
    .IncludeDirectory("~/Content/themes/base", "*.css"));
```
"*.css" joker seçicisi, 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 bir yıl sonra HTTP Süre Sonu Ü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 (sonuçta her paket için http 304 yanıtı elde edebilirsiniz). ^F5 kullanarak tam yenilemeyi zorlayabilirsiniz (sonuçta her paket için http 200 yanıtı elde edebilirsiniz.)

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

fiddler önbelleğe alma görüntüsü

İstek
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
AllMyScripts paketi içindir ve v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81 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 uygulama bu belirteci kullanarak AllMyScripts paketini isteyecektir. 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 alması 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 hatalı bir şekilde gösterir. Web Sitesi Performansını Geliştirmek için CDN'leri ve Süresi Dolanları Kullanma blog girdisinde koşullu istek yapılıp yapılmadığını belirleme konusunda IE9'un neden sorun yaşadığına bakabilirsiniz.

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:

LESS içeriğiniz için bir klasör oluşturun. Aşağıdaki örnekte Content\MyLess klasörü kullanılır.
Projenize .less NuGet paketini noktasız olarak ekleyin.

IBundleTransform arabirimini uygulayan bir sınıf ekleyin. .less dönüşümü için aşağıdaki kodu projenize 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";
    }
}

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

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

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şaretlemede yalnızca değiştirilen dosya indirilir. Sık değişen varlıklar paketleme için iyi adaylar olmayabilir.

Paketleme ve küçültme öncelikli olarak ilk sayfa isteği yükleme süresini geliştirir. Bir 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 kullanmazsanız, tarayıcıların güncellik buluşsal yöntemleri varlıkları birkaç gün sonra 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 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 göre 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ümlerde giriş olmadığından ve değer göndermediğinden, doğrulama paketini içermezler.

Ad System.Web.Optimization alanı System.Web.Optimization.dlliçinde uygulanır. Küçültme özellikleri için WebGrease kitaplığından (WebGrease.dll) yararlanarak Antlr3.Runtime.dllkullanı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 oluşturulan Bundling ve Optimizeing
Web Sayfaları Sitesine Web İyileştirmesi Ekleme.
Web Forms Paketleme ve Küçültme ekleme.
Henrik F Nielsen tarafından sunulan Web Gözatmada Paketleme ve Küçültmenin Performans Etkileri @frystyk
Rick Anderson @RickAndMSFT Web Sitesi Performansını Geliştirmek için CDN'leri ve Süresi Dolanları Kullanma
RTT'i simge durumuna küçültme (gidiş dönüş süreleri)

Katkıda Bulunanlar

Hao Kung
Howard Dierking
Diana LaRose

Share via

Paketleme ve Küçültme

Paketleme

Minification

Paketleme ve Küçültmenin Etkisi

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

Paketlemeyi ve Küçültmeyi Denetleme

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

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

CDN kullanma

Paket Oluşturma

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

Paket Önbelleğe Alma

LESS, CoffeeScript, SCSS, Sass Bundling.

PaketLe İlgili Dikkat Edilmesi Gerekenler

Ek kaynaklar

Katkıda Bulunanlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar