Bundling and Minification

Tytuł ściśle związany z minimalizacją - zarówno pod względem wielkości przesyłanych danych jak i szybkością ładowania strony.

W nowej wersji MVC zostały dodane mechanizmy zwiększające wydajność ładowania JavaScript oraz stylów CSS. Jest to kontynuacja motta "Konwencja nad konfiguracją" - brak wymagania konfiguracji. Mimo braku potrzeby konfiguracji mechanizmu - jest on w pełni konfigurowalny jaki i rozszerzalny.

W jaki sposób działa mechanizm?

Jeżeli spojrzymy do eksploratora projektu nowego projektu, znajdziemy folder zawierający pliki JavaScript jak również folder gdzie znajdują się style CSS:

Uruchamiając program i badając ruch sieciowy - np w Firebug znajdziemy tam tylko dwa wpisy:

Ciekawy jest zwłaszcza pierwszy - jest to właśnie wynik miniaturyzacji i scalania wszystkich użytych skryptów w projekcie.
Kod scalający znajduje się w pliku BundleConfig:

Code:

using System.Web.Optimization;

namespace MvcApplication3
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        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*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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