ASP.NET MVC Bundles

Każda strona zawiera wiele plików CSS oraz skryptów JS. Zwykle w celu przejrzystości i łatwiejszego utrzymania aplikacji, skrypty są rozdzielane na różne części logiczne. Podobnie jak w klasycznym programowaniu C#, w JS również korzystamy z komentarzy i formatowania kodu..

Ma to jednak pewien efekt uboczny dla wydajności. Każda spacja czy komentarz to dodatkowy tekst, który trzeba przesłać klientowi (przeglądarce).  Najbardziej optymalną sytuacją byłoby usunięcie wszelkich spacji, komentarzy, które nie mają znaczenia dla funkcjonalności oraz połączenie wszystkich skryptów w jeden plik tak, że nie trzeba wysyłać kilku zapytań. Oczywiście w praktyce taki kod byłoby niemożliwy w utrzymaniu. ASP. NET MVC zrobi to jednak za nas. Wystarczy wskazać jakie pliki chcemy połączyć w “bundle” i reszta zostanie wygenerowana za nas w tle.

Stworzenie własnego zestawu wygląda następująco:

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

Analogicznie tworzy się pakiety dla skryptów:

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

Pierwszy parametr to nazwa zestawu, a następnie przekazujemy skrypty czy style, które chcemy połączyć w całość. Następnie w widoku zamiast bezpośrednio podłączać poszczególne pliki korzystamy z następujących funkcji:

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

Jeśli uruchomilibyśmy teraz aplikację, zobaczylibyśmy zwykle skrypty. Musimy uaktywnić powyższy mechanizm np. ustawiając debug na false w pliku web.config:

<system.web>
    <compilation debug="true" />
</system.web>

Innym sposobem jest umieszczenie następującego wywołania  w pliku Global:

BundleTable.EnableOptimizations = true;

Teraz po wygenerowaniu strony, zobaczymy odniesienia do bundle:

<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>

<script src="/bundles/modernizr?v=qVODBytEBVVePTNtSFXgRX0NCEjh9U_Oj8ePaSiRcGg1"></script>

Wyraźnie widać, że oryginalne pliki zostały zastąpione pojedynczymi, zoptymalizowanymi plikami (można je otworzyć w jakimś edytorze ale oczywiście nie są one czytelne).

4 thoughts on “ASP.NET MVC Bundles”

  1. Bundle mają jednak jedną zasadniczą wadę – jeżeli w projekcie nad którym pracujesz jest podział na programistę i designera, ten ostatni ma trudność w swobodnej modyfikacji styli css i skryptów js w projekcie – tzn, nie może jak w standardowej webdeveloperce, po prostu wrzucić ich do folderu, dodać w tagu na stronie i już działać – musi poprosić o pomoc kolegę programistę.

  2. Przydaloby sie jeszcze napisac ze przy korzystaniu z bundle silnik mvc sam wybiera ktory plik (normalny lub w wersji “min” ma wykorzystac) – jest to o tyle przydatne ze mozna posiadac w projekcie i wersje min pliku i normalna co ulatwia debuggowanie, a nie wymaga zadnych dodatkowych nakladow pracy przy publikacji projektu.

  3. Warto zainteresowac sie innymi bibliotekami zajmujacymi sie tymi sprawami np request reducer (nie wiem czy nadal rozwijany) z automatu robil sprite’y co tez jest dosc mile….

  4. Ciekawe jak wygląda cache’owanie i CDN. Te bundle wydają się niezbyt przyjazne dla pamięci podręcznej…

Leave a Reply

Your email address will not be published.