Tworzenie pakietów i minifikacja

Artykuł
07/16/2024

Tworzenie pakietów i minimumfikacja to dwie techniki, których można użyć w ASP.NET 4,5, aby poprawić czas ładowania żądania. Tworzenie pakietów i minimalizowanie skraca czas ładowania przez zmniejszenie liczby żądań do serwera i zmniejszenie rozmiaru żądanych zasobów (takich jak CSS i JavaScript).

Większość bieżących głównych przeglądarek ogranicza liczbę równoczesnych połączeń na każdą nazwę hosta do sześciu. Oznacza to, że podczas przetwarzania sześciu żądań dodatkowe żądania dla zasobów na hoście będą kolejkowane przez przeglądarkę. Na poniższej ilustracji karta sieciowa narzędzi deweloperskich IE F12 pokazuje czas zasobów wymaganych przez widok Informacje przykładowej aplikacji.

B/M

Szare paski pokazują czas kolejki żądania przez przeglądarkę oczekującą na sześć limitów połączeń. Żółty pasek to czas żądania do pierwszego bajtu, czyli czas potrzebny na wysłanie żądania i odebranie pierwszej odpowiedzi z serwera. Niebieskie paski pokazują czas potrzebny na odbieranie danych odpowiedzi z serwera. Możesz kliknąć dwukrotnie element zawartości, aby uzyskać szczegółowe informacje o chronometrażu. Na przykład na poniższej ilustracji przedstawiono szczegóły chronometrażu ładowania pliku /Scripts/MyScripts/JavaScript6.js .

Zrzut ekranu przedstawiający kartę sieciową narzędzi deweloperskich A S P DOT NET z adresami URL żądań zasobów w lewej kolumnie i ich chronometrażami w prawej kolumnie.

Na powyższej ilustracji przedstawiono zdarzenie Uruchamiania , które daje czas, w którym żądanie zostało w kolejce z powodu ograniczenia liczby równoczesnych połączeń w przeglądarce. W takim przypadku żądanie zostało w kolejce dla 46 milisekund oczekujących na ukończenie innego żądania.

Łączenie

Tworzenie pakietów to nowa funkcja w wersji ASP.NET 4.5, która ułatwia łączenie lub łączenie wielu plików w jeden plik. Możesz tworzyć pliki CSS, JavaScript i inne pakiety. Mniejsza liczba plików oznacza mniej żądań HTTP i może zwiększyć wydajność ładowania pierwszej strony.

Na poniższej ilustracji przedstawiono ten sam widok chronometrażu pokazanego wcześniej widoku Informacje, ale tym razem z włączonym tworzeniem pakietów i minification.

Zrzut ekranu przedstawiający kartę szczegółów chronometrażu zasobu na narzędziach deweloperskich I E F 12. Zdarzenie Start zostało wyróżnione.

Minification

Funkcja Minification wykonuje różne optymalizacje kodu dla skryptów lub css, takich jak usuwanie niepotrzebnego odstępu i komentarzy oraz skracanie nazw zmiennych do jednego znaku. Rozważmy następującą funkcję Języka JavaScript.

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

Po minification funkcja jest zmniejszana do następujących:

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

Oprócz usuwania komentarzy i niepotrzebnych białych znaków nazwy następujących parametrów i zmiennych zostały zmienione (skrócone) w następujący sposób:

Oryginalne	Zmieniona
imageTagAndImageID	n
imageContext	t
imageElement	i

Wpływ grupowania i minyfikacji

W poniższej tabeli przedstawiono kilka ważnych różnic między listą wszystkich zasobów pojedynczo a użyciem tworzenia pakietów i minfikacji (B/M) w przykładowym programie.

	Korzystanie z B/M	Bez B/M	Zmień
Żądania plików	9	34	256%
Wysłane bazy wiedzy	3.26	11.92	266%
Odebrano bazę wiedzy	388.51	530	36%
Czas ładowania	510 MS	780 MS	53%

Wysłane bajty miały znaczną redukcję liczby pakietów, ponieważ przeglądarki są dość pełne z nagłówkami HTTP, które mają zastosowanie do żądań. Zmniejszenie liczby bajtów odebranych nie jest tak duże, ponieważ największe pliki (Scripts\jquery-ui-1.8.11.min.js i Scripts\jquery-1.7.1.min.js) są już minimalne. Uwaga: czasy w przykładowym programie używały narzędzia Fiddler do symulowania powolnej sieci. (Z programu Fiddler W menu Reguły wybierz pozycję Wydajność, a następnie pozycję Simulate Modem Speeds (Symulowanie szybkości modemu).

Debugowanie w pakiecie i ugodzonych skryptów JavaScript

Debugowanie kodu JavaScript w środowisku projektowym (gdzie element kompilacji w pliku Web.config jest ustawiony na debug="true" ), ponieważ pliki JavaScript nie są pakowane ani minimalne. Możesz również debugować kompilację wydania, w której pliki JavaScript są pakowane i minimalizowane. Korzystając z narzędzi deweloperskich IE F12, debugujesz funkcję Języka JavaScript zawartą w zestawie minyfikowanym przy użyciu następującego podejścia:

Wybierz kartę Skrypt , a następnie wybierz przycisk Rozpocznij debugowanie .
Wybierz pakiet zawierający funkcję JavaScript, którą chcesz debugować przy użyciu przycisku zasobów.
Sformatuj kod JavaScript, wybierając przycisk Konfiguracja, a następnie wybierając pozycję Formatuj język JavaScript.
W polu wprowadzania skryptu wyszukiwania wybierz nazwę funkcji, którą chcesz debugować. Na poniższej ilustracji addAltToImg został wprowadzony w polu wprowadzania skryptu wyszukiwania.

Aby uzyskać więcej informacji na temat debugowania przy użyciu narzędzi deweloperskich F12, zobacz artykuł MSDN Using the F12 Developer Tools to Debug JavaScript Errors (Debugowanie błędów języka JavaScript przy użyciu narzędzi deweloperskich F12).

Kontrolowanie grupowania i minyfikacji

Tworzenie pakietów i minimalizowanie jest włączone lub wyłączone przez ustawienie wartości atrybutu debugowania w elemenie kompilacji w pliku Web.config. W poniższym kodzie XML jest ustawiona wartość true, debug więc łączenie i minimalizowanie jest wyłączone.

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

Aby włączyć łączenie i minimalizowanie, ustaw debug wartość na "false". Ustawienie Web.config można zastąpić właściwością EnableOptimizations klasy BundleTable . Poniższy kod umożliwia tworzenie pakietów i minimalizowanie oraz zastępowanie wszystkich ustawień w pliku Web.config .

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

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

Uwaga

Chyba że EnableOptimizations atrybut debugowania w elemecie kompilacji w pliku Web.config jest ustawiony na falsewartość , pliki nie będą wiązane ani true usuwane. Ponadto nie będzie używana minimalna wersja plików, zostaną wybrane pełne wersje debugowania. EnableOptimizationszastępuje atrybut debugowania w elemecie kompilacji w pliku Web.config

Używanie grupowania i minyfikacji za pomocą ASP.NET web forms i stron sieci Web

W przypadku stron sieci Web zobacz wpis w blogu Dodawanie optymalizacji sieci Web do witryny stron sieci Web.
Aby zapoznać się z formularzami internetowymi, zobacz wpis w blogu Dodawanie tworzenia pakietów i minyfikacji do formularzy sieci Web.

Używanie biblioteki Bundling and Minification z ASP.NET MVC

W tej sekcji utworzymy projekt ASP.NET MVC w celu zbadania tworzenia pakietów i minyfikacji. Najpierw utwórz nowy ASP.NET projekt internetowy MVC o nazwie MvcBM bez zmiany żadnych wartości domyślnych.

Otwórz plik App\_Start\BundleConfig.cs i sprawdź RegisterBundles metodę używaną do tworzenia, rejestrowania i konfigurowania pakietów. Poniższy kod przedstawia część RegisterBundles metody .

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

Powyższy kod tworzy nowy pakiet JavaScript o nazwie ~/bundles/jquery , który zawiera wszystkie odpowiednie (jest to debugowanie lub minimalizowanie, ale nie .pliki vsdoc) w folderze Scripts , które pasują do ciągu wieloznacznego "~/Scripts/jquery-{version}.js". W przypadku ASP.NET MVC 4 oznacza to, że w przypadku konfiguracji debugowania plik jquery-1.7.1.js zostanie dodany do pakietu. W konfiguracji wydania jquery-1.7.1.min.js zostaną dodane. Struktura tworzenia pakietów jest zgodna z kilkoma typowymi konwencjami, takimi jak:

Wybranie pliku ".min" dla wydania po FileX.min.js i FileX.js istnieje.
Wybieranie wersji innej niż ".min" dla debugowania.
Ignorowanie plików "-vsdoc" (takich jak jquery-1.7.1-vsdoc.js), które są używane tylko przez funkcję IntelliSense.

Dopasowywanie {version} symboli wieloznacznego pokazanych powyżej służy do automatycznego tworzenia pakietu jQuery z odpowiednią wersją zestawu jQuery w folderze Scripts . W tym przykładzie użycie symbolu wieloznacznego zapewnia następujące korzyści:

Umożliwia aktualizowanie nowszej wersji biblioteki jQuery przy użyciu narzędzia NuGet bez zmieniania poprzedniego kodu zbiorczego lub odwołań jQuery na stronach widoku.
Automatycznie wybiera pełną wersję konfiguracji debugowania i wersję ".min" dla kompilacji wydania.

Korzystanie z sieci CDN

Poniższy kod zastępuje lokalny pakiet jQuery pakietem jQuery cdN jQuery.

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.
}

W powyższym kodzie zapytanie jQuery będzie wymagane z sieci CDN w trybie wydania, a wersja debugowania jQuery zostanie pobrana lokalnie w trybie debugowania. W przypadku korzystania z sieci CDN należy mieć mechanizm rezerwowy w przypadku niepowodzenia żądania CDN. Poniższy fragment znaczników z końca pliku układu pokazuje skrypt dodany do żądania jQuery, jeśli usługa CDN zakończy się niepowodzeniem.

</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>

Tworzenie pakietu

Metoda klasy Include Bundle przyjmuje tablicę ciągów, gdzie każdy ciąg jest ścieżką wirtualną do zasobu. Poniższy kod z RegisterBundles metody w pliku App\_Start\BundleConfig.cs pokazuje, jak wiele plików jest dodawanych do pakietu:

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"));

Metoda klasy IncludeDirectory Bundle jest udostępniana w celu dodania wszystkich plików w katalogu (i opcjonalnie wszystkich podkatalogów), które są zgodne ze wzorcem wyszukiwania. Poniżej przedstawiono interfejs API klasy IncludeDirectory Bundle:

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.

Pakiety są przywołyne w widokach przy użyciu metody Render (Styles.Render dla arkuszy CSS i Scripts.Render języka JavaScript). Poniższy znacznik z pliku Views\Shared\_Layout.cshtml pokazuje, jak domyślne widoki projektu internetowego ASP.NET odwołują się do pakietów CSS i JavaScript.

<!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>

Zwróć uwagę, że metody renderowania pobierają tablicę ciągów, więc można dodać wiele pakietów w jednym wierszu kodu. Zazwyczaj należy użyć metod renderowania, które tworzą niezbędny kod HTML do odwołowania się do elementu zawartości. Możesz użyć Url metody , aby wygenerować adres URL elementu zawartości bez znaczników wymaganych do odwołowywania się do zasobu. Załóżmy, że chcesz użyć nowego atrybutu asynchronicznego HTML5. Poniższy kod pokazuje, jak odwoływać się do modernizatora Url przy użyciu metody .

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

Używanie symbolu wieloznakowego "*" do wybierania plików

Ścieżka wirtualna określona w metodzie Include i wzorzec wyszukiwania w IncludeDirectory metodzie może akceptować jeden znak wieloznaczny "*" jako prefiks lub sufiks w ostatnim segmencie ścieżki. Ciąg wyszukiwania jest niewrażliwy na wielkość liter. Metoda IncludeDirectory ma opcję wyszukiwania podkatalogów.

Rozważ projekt z następującymi plikami JavaScript:

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

dir imag

W poniższej tabeli przedstawiono pliki dodane do pakietu przy użyciu symbolu wieloznakowego, jak pokazano poniżej:

Nazwać	Pliki dodane lub zgłoszone wyjątki
Include("~/Scripts/Common/*.js")	AddAltToImg.js, ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/T*.js")	Nieprawidłowy wyjątek wzorca. Symbol wieloznaczny jest dozwolony tylko w prefiksie lub sufiksie.
Include("~/Scripts/Common/og.")	Nieprawidłowy wyjątek wzorca. Dozwolony jest tylko jeden znak wieloznaczny.
Include("~/Scripts/Common/T*")	ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/*")	Nieprawidłowy wyjątek wzorca. Czysty segment z symbolami wieloznacznymi jest nieprawidłowy.
IncludeDirectory("~/Scripts/Common", "T*")	ToggleDiv.js, ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*", true)	ToggleDiv.js, ToggleImg.js, ToggleLinks.js

Jawne dodanie każdego pliku do pakietu jest zazwyczaj preferowanym w przypadku ładowania plików z symbolami wieloznacznymi z następujących powodów:

Dodawanie skryptów według wartości domyślnych symboli wieloznacznych w celu załadowania ich w kolejności alfabetycznej, co zwykle nie jest potrzebne. Pliki CSS i JavaScript często muszą być dodawane w określonej kolejności (nie alfabetycznej). To ryzyko można ograniczyć, dodając niestandardową implementację IBundleOrderer , ale jawne dodawanie każdego pliku jest mniej podatne na błędy. Na przykład możesz dodać nowe zasoby do folderu w przyszłości, co może wymagać zmodyfikowania implementacji IBundleOrderer .
Wyświetlanie określonych plików dodanych do katalogu przy użyciu ładowania symboli wieloznacznego można uwzględnić we wszystkich widokach odwołujących się do tego pakietu. Jeśli widok określony skrypt zostanie dodany do pakietu, może zostać wyświetlony błąd języka JavaScript w innych widokach odwołujących się do pakietu.
Pliki CSS importujące inne pliki powodują dwukrotne załadowanie zaimportowanych plików. Na przykład poniższy kod tworzy pakiet z większością plików CSS motywu jQuery załadowanych dwa razy.
```
bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
    .IncludeDirectory("~/Content/themes/base", "*.css"));
```
Selektor symboli wieloznacznego "*.css" wprowadza każdy plik CSS w folderze, w tym plik Content\themes\base\jquery.ui.all.css . Plik jquery.ui.all.css importuje inne pliki CSS.

Buforowanie pakietów

Pakiety ustawiają nagłówek HTTP Wygasa rok od momentu utworzenia pakietu. Jeśli przejdziesz do wcześniej wyświetlanej strony, program Fiddler pokazuje, że program IE nie wysyła żądania warunkowego dla pakietu, oznacza to, że nie ma żadnych żądań HTTP GET z programu IE dla pakietów i brak odpowiedzi HTTP 304 z serwera. Możesz wymusić, aby program IE wysyłał żądanie warunkowe dla każdego pakietu przy użyciu klucza F5 (co powoduje odpowiedź HTTP 304 dla każdego pakietu). Pełne odświeżanie można wymusić za pomocą programu ^F5 (co powoduje odpowiedź HTTP 200 dla każdego pakietu).

Na poniższej ilustracji przedstawiono kartę Buforowanie w okienku odpowiedzi programu Fiddler:

Obraz buforowania programu fiddler

Żądanie
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
element jest przeznaczony dla pakietu AllMyScripts i zawiera parę ciągów zapytania v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81. Ciąg zapytania v ma token wartości, który jest unikatowym identyfikatorem używanym do buforowania. Jeśli pakiet nie ulegnie zmianie, aplikacja ASP.NET zażąda pakietu AllMyScripts przy użyciu tego tokenu. Jeśli jakikolwiek plik w pakiecie ulegnie zmianie, platforma optymalizacji ASP.NET wygeneruje nowy token, co gwarantuje, że żądania przeglądarki dla pakietu otrzymają najnowszy pakiet.

Jeśli uruchomisz narzędzia deweloperskie IE9 F12 i przejdziesz do wcześniej załadowanej strony, program IE niepoprawnie wyświetla warunkowe żądania GET wysyłane do każdego pakietu, a serwer zwraca protokół HTTP 304. Możesz dowiedzieć się, dlaczego program IE9 ma problemy z ustaleniem, czy żądanie warunkowe zostało wykonane we wpisie w blogu Using CDNs and Expires to Improve Web Site Performance (Poprawianie wydajności witryny sieci Web przy użyciu sieci CDN i wygasa).

LESS, CoffeeScript, SCSS, Sass Bundling.

Struktura tworzenia pakietów i minyfikacji zapewnia mechanizm przetwarzania języków pośrednich, takich jak SCSS, Sass, LESS lub Coffeescript, i stosuje przekształcenia, takie jak minification do wynikowego pakietu. Aby na przykład dodać pliki .less do projektu MVC 4:

Utwórz folder dla zawartości LESS. W poniższym przykładzie użyto folderu Content\MyLess .
Dodaj pakiet NuGet less dotless do projektu.

Dodaj klasę, która implementuje interfejs IBundleTransform . W przypadku przekształcenia .less dodaj następujący kod do projektu.

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";
    }
}

Utwórz pakiet plików LESS z przekształceniem LessTransform CssMinify . Dodaj następujący kod do RegisterBundles metody w pliku App\_Start\BundleConfig.cs .

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

Dodaj następujący kod do wszystkich widoków, które odwołują się do pakietu LESS.
```
@Styles.Render("~/My/Less");
```

Zagadnienia dotyczące pakietu

Dobrą konwencją do naśladowania podczas tworzenia pakietów jest dołączenie "pakietu" jako prefiksu w nazwie pakietu. Zapobiegnie to możliwemu konfliktowi routingu.

Po zaktualizowaniu jednego pliku w pakiecie zostanie wygenerowany nowy token dla parametru ciągu zapytania pakietu, a pełny pakiet musi zostać pobrany przy następnym żądaniu strony zawierającej pakiet. W tradycyjnych znacznikach, w których każdy zasób jest wymieniony indywidualnie, tylko zmieniony plik zostanie pobrany. Aktywa, które zmieniają się często, mogą nie być dobrymi kandydatami do tworzenia pakietów.

Tworzenie pakietów i minimumfikacja poprawia przede wszystkim czas ładowania żądania pierwszej strony. Po zażądaniu strony internetowej przeglądarka buforuje zasoby (JavaScript, CSS i obrazy), dzięki czemu łączenie i minimalizowanie nie zapewni żadnego zwiększenia wydajności podczas żądania tej samej strony lub stron w tej samej witrynie żądającej tych samych zasobów. Jeśli nie ustawisz poprawnie nagłówka wygasającego w zasobach i nie używasz tworzenia pakietów i minyfikacji, heurystyka świeżości przeglądarek oznaczy zasoby nieaktualne po kilku dniach, a przeglądarka będzie wymagać żądania weryfikacji dla każdego zasobu. W takim przypadku łączenie i minimalizowanie zapewniają wzrost wydajności po pierwszym żądaniu strony. Aby uzyskać szczegółowe informacje, zobacz blog Using CDNs and Expires to Improve Web Site Performance (Używanie sieci CDN i wygasa w celu zwiększenia wydajności witryny sieci Web).

Ograniczenie przeglądarki sześciu równoczesnych połączeń na każdą nazwę hosta można ograniczyć przy użyciu sieci CDN. Ponieważ sieć CDN będzie mieć inną nazwę hosta niż witryna hostingu, żądania zasobów z sieci CDN nie będą liczone od sześciu równoczesnych połączeń do środowiska hostingu. Sieć CDN może również zapewnić typowe zalety buforowania pakietów i buforowania krawędzi.

Pakiety powinny być partycjonowane według stron, które ich potrzebują. Na przykład domyślny szablon MVC ASP.NET dla aplikacji internetowej tworzy pakiet weryfikacji jQuery oddzielony od zestawu jQuery. Ponieważ utworzone widoki domyślne nie mają danych wejściowych i nie publikują wartości, nie zawierają pakietu weryfikacji.

System.Web.Optimization Przestrzeń nazw jest implementowana w System.Web.Optimization.dll. Korzysta ona z biblioteki WebGrease (WebGrease.dll) na potrzeby funkcji minification, które z kolei używają Antlr3.Runtime.dll.

Używam twittera, aby szybko publikować posty i udostępniać linki. Mój uchwyt w serwisie Twitter jest: @RickAndMSFT

Dodatkowe zasoby

Wideo: Bundling i Optymalizacja przez Howard Dierking
Dodawanie optymalizacji sieci Web do witryny stron sieci Web.
Dodawanie grupowania i minyfikacji do formularzy sieci Web.
Wpływ na wydajność tworzenia pakietów i minyfikacji przeglądania w Internecie przez Henrika F Nielsena @frystyk
Używanie sieci CDN i wygasa w celu zwiększenia wydajności witryny sieci Web przez Rick Anderson @RickAndMSFT
Minimalizuj czas RTT (czasy rundy)

Współautorzy

Hao Kung
Howard Dierking
Diana LaRose

Udostępnij za pośrednictwem

Tworzenie pakietów i minifikacja

Łączenie

Minification

Wpływ grupowania i minyfikacji

Debugowanie w pakiecie i ugodzonych skryptów JavaScript

Kontrolowanie grupowania i minyfikacji

Używanie grupowania i minyfikacji za pomocą ASP.NET web forms i stron sieci Web

Używanie biblioteki Bundling and Minification z ASP.NET MVC

Korzystanie z sieci CDN

Tworzenie pakietu

Używanie symbolu wieloznakowego "*" do wybierania plików

Buforowanie pakietów

LESS, CoffeeScript, SCSS, Sass Bundling.

Zagadnienia dotyczące pakietu

Dodatkowe zasoby

Współautorzy

Opinia

Dodatkowe zasoby