BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Mechanizm Bundle i Minifikacja w MVC 4

18-04-2013 06:00 | Rafał Gordon
Jak szybko i łatwo przyśpieszyć wczytywanie stron www przy pomocy nowych mechanizmów w ASP.NET 4.5 na podstawie projektu w MVC 4.

Artykuł opisuje wsparcie dla  Bundle  i Minifikacji w MVC 4, czyli jak w prosty sposób zmniejszyć rozmiar i ilość plików javascrip i css.

Im więcej używamy w projekcie webowym skryptów oraz plików .css tym nasza strona ładuje się wolniej, często z tego powodu  zastępujemy nasze pliki skryptowe wersjami .min.js,  ale robienie tego przy każdej zmianie jest niewygodne.  Natomiast każde połączenie  przeglądarki aby pobrać kolejny plik zwiększa czas ładowania. Na szczęście w nowym ASP.NET 4.5 pojawiło się wsparcie dla  Bundle  i Minifikacji. A w dalszej części artykułu opisze go na postawie użycia w projekcie MVC 4.

Każdy nowopowstały projekt MVC4 w Visual Studio ma gotową zaimplementowaną obsługę  Bundle, znajduje się ona w App_Start -> BundleConfig.cs a jej uruchomienie w Global.asax.

Fragment klasy BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)
{
            //Przykładowy budle z własnym skryptem js
            bundles.Add(new ScriptBundle("~/bundles/myScript").Include(
                        "~/Scripts/myScript.js"));
            //Budle mogą mieć więcej niż jeden plik
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));
		…
}	

Jak widzimy na powyższym przykładzie bundle mogą się składać z więcej niż jednego pliku a co za tym idzie może w łatwy sposób grupować skrypty(wszystkie pliki z jednego bundla są łączone do jednego generowanego pliku) i zapewnić każdej z naszych stron skrypty które potrzebuje a przeglądarka będziemy musiał wykonać mniej połączeń aby je pobrać.

W Global.asax jest uruchamiany przy pomocy

BundleConfig.RegisterBundles(BundleTable.Bundles);

Aby skrypty były ładowane na stronach należy użyć  @Scripts.Render("~/bundles/nazwa") zamiast np.

 <script src="../nazwa1.js"></script>
 <script src="../nazwa2.js"></script>
 <script src="../nazwa3.js"></script>

 

Skoro wiemy już gdzie znajduje się implementacja czas przejść do przykładu działania.

Skrypt przykładowy przed:

 SetElementClass = function (elementId, className) {

     ///<signature>

     ///<summary> Ustawia klasę elementu

     // </summary>

     //<paramname="elementId"type="String">Id elementu</param>

     //<paramname="attributeName"type="String">Nazwa klasy</param>

     ///</signature>

     document.getElementById(elementId).setAttribute("class", className);

 }

 

Po : 

SetElementClass=function(n,t){document.getElementById(n).setAttribute("class",t)}


Jak widać wszystkie białe znaki oraz komentarze zostały usunięte, a nazwy zmiennych zostały skrócone np. elementId na n. Zmiany te zaowocowały zmniejszeniem rozmiaru pliku, a co za tym idzie przyśpieszaniem wczytywania naszej strony.

 Dla dokładniejszego porównania zamieszczam fragmenty z sekcji network z IE:

Przed:

 

Po:

 

 

Jak widać z przykładu wszystkie pliki js i css zmniejszyły znacznie swoją objętość. Do zobrazowania przykładu łączenia plików dodałem trzy skrypty „myScript”, które po połączniu w jeden bundel i optymalizacji ulegają zmniejszeniu prawie o połowę, a ilość połączeń która musi wykonać przeglądarka zmniejszyła się oczywiście o ilość plików zgrupowanych(standardowo większość przeglądarek posiada limit 6 połączeń na raz).

Mechanizm ten jest domyślnie wyłączony w trybie Debug aby rozpocząć optymalizacje należy uruchomić projekt w trybie Release, bądź dodać do funkcji RegisterBundles następującą linijkę

BundleTable.EnableOptimizations = true;

 

Pamiętajmy o czyszczeniu pamięci cache przeglądarki jeżeli nie widzimy zmian wynikających z optymalizacji.

Podsumowując użycie mechanizmu Bundle jest bardzo łatwe, a korzyści pomiędzy ilością wykonanej pracy a przyspieszeniem wczytywania strony (z dużą ilością javascript i css) znaczne. 

Komentarze 0

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.