Script, CSS - Paczki i minimalizacja skryptów w MVC

Script, CSS - Bundling and Minification - zmniejszanie wielkości plików.

Minimalizacja i tworzenie paczek skryptów CSS i JavaScript to procesy służące zmniejszeniu wielkości plików i ograniczeniu liczby żądań HTTP do minimum. Plik odpowiedzialny za budowanie i minimalizacje znajduję się w Folderze App_Start i pliku BundlesConfig.cs.

Minimalizacja (Minification)

Minimalizacja to proces polegający na zmianie nazw zmiennych na krótsze (zazwyczaj jednoznakowe), usuwaniu białych znaków, komentarzy do kodu oraz przełamań do kolejnej linii w celu osiągnięcia jak najmniejszego rozmiaru pliku.

Tworzenie paczek skryptów (Bundling)

Tworzenie paczek skryptów polega na łączeniu kilku osobnych skryptów, plików z kodem w jeden większy plik w celu przesłania do klienta. Operacja ta pozwala zredukować ilość żądań HTTP wysyłanych do serwera.

Kod metody RegisterBundles:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));
 
    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));
 
    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
 
    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.theme.css"));
}

Metoda RegisterBundles jest odpowiedzialna za tworzenie, rejestracje i konfiguracje paczek skryptów.

W ASP.NET MVC zaimplementowane jest kilka domyślnych rozwiązań:

w trybie release wybierane są skrypty z roszerzeniem .min (jeśli istnieją),
w trybie debug wybierane są pełne pliki bez roszerzenia .min,
aby zapobiec konieczności ciągłych zmian wersji skryptów jQuery można użyć znacznika {version}, który automatycznie wybierze wersje używaną przez naszą aplikacje (podczas aktualizacji zmieniamy tylko skrypt jQuery beż żadnych zmian w kodzie aplikacji):
```
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
```

Łączenie kilku stylów CSS w jeden (metoda StyleBundle):

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.theme.css"));

Łączenie kilku skryptów JS w jeden (metoda ScriptBundle):

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

Użycie paczek w widoku:

@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")

Kolejność skryptów:

Istnieje kilka zasad/wskazówek, które należy przestrzegać podczas ładowania i umieszczania skryptów w kodzie strony, aby umożliwić pozornie szybsze ładowanie strony (struktura dokumentu będzie gotowa, użytkownik będzie mógł przeglądać stronę bez wiedzy o tym, że strona jest ciągle wczytywana):

w sekcji <head> umieszczamy tylko niezbędne do prawidłowego wyświetlenia się strony skrypty,
w sekcji <body> na samym końcu umieszczamy pozostałe skrypty, które nie wymagają, aby były załadowane przed strukturą HTML strony (np. walidacja, efekty graficzne itp.),

dla niektórych skryptów nie ma możliwości stworzenia jednej paczki, np. jQuery validation potrzebuje podstawowej biblioteki jQuery, przez co skrypty muszą być ładowane osobno w odpowiedniej kolejności.

Więcej informacji:

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

<- Wstecz

Dalej ->

Komentarze facebook (polub nasz profil na FB aby je zobaczyć):

Kurs ASP.NET MVC