Tworzenie pakietów i minifikacja

Artykuł
07/13/2023

Tworzenie pakietów i minifikacja 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 karty sieciowe narzędzi deweloperskich IE F12 pokazują 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 odebranie 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ę sieć narzędzi deweloperskich 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 ASP.NET 4.5, która ułatwia łączenie lub łączenie wielu plików w jeden plik. Można tworzyć pakiety CSS, JavaScript i inne. 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 łączeniem i minification.

Zrzut ekranu przedstawiający kartę szczegóły chronometrażu zasobu na narzędziach deweloperskich I E F 12. Zdarzenie startowe 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 ograniczona 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 zmieniono nazwy następujących parametrów i zmiennych (skrócone) w następujący sposób:

Oryginalne	Renamed
imageTagAndImageID	n
imageContext	t
imageElement	mogę

Wpływ łączenia i minimalizowania

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

	Korzystanie z usługi B/M	Bez B/M	Zmień
Żądania dotyczące 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 menu Reguły programu Fiddler wybierz pozycję Wydajność , a następnie symuluj szybkość modemu).

Debugowanie powiązanego i zmierowanego kodu JavaScript

Łatwo debugować kod JavaScript w środowisku deweloperskim (gdzie element kompilacji w pliku Web.config jest ustawiony na debug="true" wartość ), ponieważ pliki JavaScript nie są pakowane ani minimalizowane. 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 pakiecie minified 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 assets.
Sformatuj minimalny kod JavaScript, wybierając przycisk Konfiguracja a następnie wybierając pozycję Formatuj język JavaScript.
W polu wejściowym Skrypt wyszukiwania wybierz nazwę funkcji, którą chcesz debugować. Na poniższej ilustracji polecenie AddAltToImg zostało wprowadzone w polu wprowadzania skryptu wyszukiwania .

Aby uzyskać więcej informacji na temat debugowania za pomocą narzędzi deweloperskich F12, zobacz artykuł MSDN Using the F12 Developer Tools to Debug JavaScript Errors (Używanie narzędzi deweloperskich F12 do debugowania błędów języka JavaScript).

Kontrolowanie grupowania i minification

Tworzenie pakietów i minifikacja 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ć tworzenie pakietów 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ą pakowane ani usuwane.true Ponadto nie będzie używana minimalna wersja plików. Zostaną wybrane pełne wersje debugowania. EnableOptimizationszastępuje atrybut debugowania w elemrybucie kompilacji w pliku Web.config

Używanie grupowania i minimalizowania z ASP.NET Web Forms i stronami sieci Web

W przypadku stron sieci Web zobacz wpis w blogu Dodawanie optymalizacji sieci Web do witryny stron sieci Web.
Aby uzyskać Web Forms, zobacz wpis w blogu Adding Bundling and Minification to Web Forms (Dodawanie tworzenia pakietów i minification do Web Forms).

Używanie grupowania i minimalnej weryfikacji z ASP.NET MVC

W tej sekcji utworzymy projekt ASP.NET MVC w celu zbadania tworzenia pakietów i minimalizowania. Najpierw utwórz nowy projekt internetowy mvc o nazwie MvcBM ASP.NET bez zmieniania 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 elementy (jest to debugowanie lub zminimalizowane, 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 zostaną dodane jquery-1.7.1.min.js . Struktura tworzenia pakietów jest zgodna z kilkoma typowymi konwencjami, takimi jak:

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

Zgodne symbole {version} wieloznaczne pokazane powyżej są używane do automatycznego tworzenia pakietu jQuery z odpowiednią wersją jQuery w folderze Scripts . W tym przykładzie użycie symbolu wieloznacznego zapewnia następujące korzyści:

Umożliwia użycie narzędzia NuGet do aktualizacji do nowszej wersji jQuery bez zmiany poprzedniego kodu tworzenia pakietów lub odwołań jQuery na stronach widoku.
Automatycznie wybiera pełną wersję konfiguracji debugowania i wersję ".min" dla kompilacji wydania.

Korzystanie z usługi CDN

Poniższy kod zastępuje lokalny pakiet jQuery pakietem 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 żądane z sieci CDN w trybie wydania, a wersja debugowania jQuery zostanie pobrana lokalnie w trybie debugowania. W przypadku korzystania z usługi CDN należy mieć mechanizm rezerwowy w przypadku niepowodzenia żądania usługi 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 IncludeBundle 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"));

Udostępniono metodę klasy IncludeDirectoryBundle w celu dodania wszystkich plików w katalogu (i opcjonalnie wszystkich podkatalogów), które pasują do wzorca wyszukiwania. Interfejs API klasy IncludeDirectorybundle jest pokazany poniżej:

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.

Do pakietów można odwoływać się w widokach przy użyciu metody Render (Styles.Render dla css i Scripts.Render 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, dzięki czemu można dodać wiele pakietów w jednym wierszu kodu. Zazwyczaj chcesz 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 potrzebnych do odwołania się do zasobu. Załóżmy, że chcesz użyć nowego atrybutu asynchronicznego HTML5. Poniższy kod pokazuje, jak odwołać 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 i wzorzec wyszukiwania w IncludeIncludeDirectory 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
Scripts\Common\ToggleDiv.js
Scripts\Common\ToggleImg.js
Scripts\Common\Sub1\ToggleLinks.js

dir imag

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

Call	Dodane pliki lub zgłoszony wyjątek
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 na prefiksie lub sufiksie.
Include("~/Scripts/Common/og.")	Nieprawidłowy wyjątek wzorca. Dozwolone jest tylko jedno symbole wieloznaczne.
Include("~/Scripts/Common/T*")	ToggleDiv.js, ToggleImg.js
Include("~/Scripts/Common/*")	Nieprawidłowy wyjątek wzorca. Czysty segment symboli wieloznacznych jest nieprawidłowy.
IncludeDirectory("~/Scripts/Common", "T*")	ToggleDiv.js, ToggleImg.js
IncludeDirectory("~/Scripts/Common", "T*", true)	ToggleDiv.js, ToggleImg.js, ToggleLinks.js

Jawne dodawanie każdego pliku do pakietu jest zazwyczaj preferowane 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, która zwykle nie jest odpowiednia. Często należy dodawać pliki CSS i JavaScript w określonej kolejności (nienumerycznej). 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 do pakietu zostanie dodany konkretny skrypt, może zostać wyświetlony błąd 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 symbolu wieloznacznego "*.css" przenosi 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świetlonej strony, program Fiddler pokazuje, że program IE nie wysyła żądania warunkowego dla pakietu, oznacza to, że nie ma żądań HTTP GET z programu IE dla pakietów i brak odpowiedzi HTTP 304 z serwera. Program IE może wymusić wykonanie żądania warunkowego 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ą polecenia ^F5 (co powoduje odpowiedź HTTP 200 dla każdego pakietu).

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

Obraz buforowania programu fiddler

Żądanie
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
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 zmieni się, aplikacja ASP.NET zażąda pakietu AllMyScripts przy użyciu tego tokenu. Jeśli jakikolwiek plik w pakiecie ulegnie zmianie, struktura 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 żądania GET warunkowe wysyłane do każdego pakietu i serwera zwracającego protokół HTTP 304. Możesz dowiedzieć się, dlaczego program IE9 ma problemy z ustaleniem, czy w wpisie w blogu zostało wykonane żądanie warunkowe przy użyciu sieci CDN i wygasa w celu zwiększenia wydajności witryny sieci Web.

LESS, CoffeeScript, SCSS, Sass Bundling.

Struktura tworzenia pakietów i minification 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 bez kropki 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 LessTransform przekształceniem 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, pobierany będzie tylko zmieniony plik. Zasoby, które zmieniają się często, mogą nie być dobrymi kandydatami do tworzenia pakietów.

Tworzenie pakietów i minimalizowanie zwiększa przede wszystkim czas ładowania żądań 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 wygasa 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 tworzenie pakietów i minification zapewnia wzrost wydajności po żądaniu pierwszej 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 poprawy 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ą wliczać się do sześciu równoczesnych połączeń w środowisku 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 możliwości minification, które z kolei korzystają z Antlr3.Runtime.dll.

Używam Twittera, aby szybko publikować posty i udostępniać linki. Moje dojście do serwisu Twitter jest: @RickAndMSFT

Dodatkowe zasoby

Współautorzy

Hao Kung
Howard Dierking
Diana LaRose

Tworzenie pakietów i minifikacja

Łączenie

Minification

Wpływ łączenia i minimalizowania

Debugowanie powiązanego i zmierowanego kodu JavaScript

Kontrolowanie grupowania i minification

Używanie grupowania i minimalizowania z ASP.NET Web Forms i stronami sieci Web

Używanie grupowania i minimalnej weryfikacji z ASP.NET MVC

Korzystanie z usługi 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

Opinia

Dodatkowe zasoby