Bundling and Minification w ASP MVC 4

Bundling i Minification to dwie techniki które można użyć w ASP MVC 4 w celu poprawy czasu ładowania stron. Bundling i Minification poprawia czas ładowania przez zmniejszenie liczby żądań do serwera i zmniejszenie rozmiaru wymaganych składników (takich jak CSS i JavaScript.)

We wcześniejszych wersjach obydwie techniki można było zaimplementować używając zewnętrznych bibliotek. Wbudowane rozwiązanie rozwiązuje ten problem i spełnia swoje zadania w bardzo dobry sposób. Poniższy rysunek to okno programu Firebug przedstawiające sporą liczbę odwołań do serwera.

Aby zredukować liczbę odwołań do serwera, należy skorzystać z mechanizmu Bundling który ułatwia łączenie wielu plików w jeden pakiet. Można tworzyć pakiety CSS, JavaScript i inne. Mniejsza liczba plików oznacza mniej żądań HTTP i może przyspieszyć ładowanie stron. Minification wykonuje różnorodne optymalizacje kodu dla skryptów lub CSS, takich jak usunięcie niepotrzebnych białych znaków i komentarzy oraz skrócenie nazwy zmiennych do jednego znaku. Tak więc nie potrzeba tworzyć osobnych plików z rozszerzeniem min.js. Poniższa ilustracja przedstawia ten sam widok ale przy wykorzystaniu mechanizmu Bundling i Minification.

Jak widać liczba żądań drastycznie spadła.

Użycie tego mechanizmu jest proste. Należy otworzyć App_Start\BundleConfig.cs i zmodyfikować metodę RegisterBundles, która jest używana do tworzenia, rejestracji i konfiguracji wiązań. Poniższy kod przedstawia część metody RegisterBundles.

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

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

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

	bundles.Add(new ScriptBundle("~/bundles/js").Include(                        
				"~/bundles/jquery",
				"~/bundles/jqueryui",
				"~/bundles/jqueryval",
				));
}

– „{version}” oznacza pobranie odpowiedniej wersji pliku znajdującej się w katalogu Scripts. Jeżeli korzystamy z mechanizmu Nuget do aktualizacji jQuery to nie musimy zmieniać kodu metody RegisterBundles, ponieważ użycie {version} skutkuje użyciem nowej wersji biblioteki jQuery.
-„*” w „~/Scripts/jquery.validate*” oznacza pobranie wszystkich plików zaczynających się od jquery.validate.

Podobnie działa tworzenie paczek css:

public static void RegisterBundles(BundleCollection bundles)
{
	bundles.Add(new StyleBundle("~/Content/site-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.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.spinner.css",
				"~/Content/themes/base/jquery.ui.tooltip.css",
				"~/Content/themes/base/jquery.ui.theme.css"));

	bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/themes/base/css"));
}

Paczki mogą być także łączone (np. „~/bundles/js”). Możliwe jest także wykorzystanie sieci CDN:

bundles.Add(new ScriptBundle("~/bundles/jquery",
		"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js").Include(
		"~/Scripts/jquery-{version}.js"));

Powyższy kod wykorzystuje CDN w wersji Release a w Debug lokalną wersje.

Użycie paczki jest bardzo proste, sprowadza się do wywołania metod Styles.Render (dla stylów) lub Scripts.Render (dla skryptów) których parametrami jest nazwa paczki:

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

Funkcja Bundling i Minification jest włączona lub wyłączona przez ustawienie wartości atrybutu debug w elemencie compilation w pliku Web.config. W poniższym XML, debug jest ustawiona na true, w takim przypadku mechanizm Bundling i Minification jest wyłączony.