Bundling & Minification

Modul 4 - Lekcija 3

BundleConfig i optimizacija CSS/JS resursa

⏱️ Trajanje: ~2 časa | 📚 Nivo: Srednji | 🎯 Praktični primjeri: 3

📖 Šta je Bundling i Minification?

Bundling je tehnika spajanja više CSS ili JS fajlova u jedan virtuelni fajl na serveru, smanjujući time broj HTTP zahtjeva prema serveru od strane Browsera.

Minification (Minifikacija) je proces uklanjanja nepotrebnih karaktera (kao što su razmaci, prelasci u novi red i komentari) iz izvornog koda bez uticaja na njegovu funkcionalnost, čime se drastično smanjuje veličina fajla koju klijent preuzima. To je kao ZIP bez arhive, samo pakovanje texta!

Značaj za sisteme e-Uprave

Javnim aplikacijama se masovno pristupa iz zabačenijih dijelova javne uprave na slabijim telekomunikacijskim pristupnim tačkama. Smanjivanje 15 fizičkih CSS fileova na 1 smanji broj i vrijeme otvaranja konekcije poboljšavajući brzinu responzivnosti do 40%.

⚙️ Razlika u HTTP Zahtjevima

Prije optimizacije: Preglednik (Browser) uspostavlja 3 odvojene HTTP TCP konekcije, prolazi procedure rukovanja enkripcijom, preuzima punih 270KB strukture.

Poslije optimizacije: Pomoću ASP.NET Minifications paketa, svi CSS fajlovi su automatski kompajlirani serveru poslije buildanja u samo 1 Bundle fajl znatno umanjene i kompresovane velicine!

⚙️ BundleConfig Konfiguracija

Konfiguracija se vrši unutar fajla App_Start/BundleConfig.cs. Uključujemo prave, žive prostrane fajlove u jedan virtuelni mrežni URL (nazvan Bundle).

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // Javni portal stilovi (Glavni CSS paket) - Adresa je /Content/public-css
        bundles.Add(new StyleBundle("~/Content/public-css").Include(
                  "~/Content/bootstrap.css",      // Standardni framework
                  "~/Content/public-theme.css",   // E-Uprava tema
                  "~/Content/site.css"));         // Naš prilagođeni CSS

        // Admin panel stilovi (Učitavaju se samo za Administrativne radnike)
        bundles.Add(new StyleBundle("~/Content/admin-css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/admin-theme.css",
                  "~/Content/dashboard.css"));

        // jQuery fajlovi JS paket koriste {version} string zamjenu paketa!
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        // Forsiranje optimizacije u Debug modu (obično radi samo za Web Deploy u Release)
        // BundleTable.EnableOptimizations = true; 
    }
}

📦 Korištenje Bundle-a i Cache Busting (v=Hash)

Učitavanje navedenih resursa unutar aplikacije odvija se preko ugrađenih HTML Helper metoda (Styles.Render i Scripts.Render).

Rješenje Browser Cache Problema

Kada ASP.NET generiše HTML stranice, automatski dodaje jedinstvenu oznaku vezanu za verziju fajla - MD5 Hash!
Npr. /Content/public-css?v=Xr3wdsX9...

Ovaj "Cache Busting" je sjajan mehanizam; ukoliko IT Odjel uprave u 3h ujutro zamjeni CSS fajlove popravkom, MD5 hash se odmah mijenja server ga renderira novo Hashovanog... te Browser detektuje da Hash više nije isti u HTML-u pa prestane učitavati staru zakeširanu verziju iz Temporary-ja i osvježi CSS kod korisnika automatski!

@* Postavljanje u _AdminLayout.cshtml *@
<head>
    @Styles.Render("~/Content/admin-css")
</head>
<body>
    <!-- Tijelo stranice ... -->
    
    @* Postavljanje JS fajlova na kraj dno Body elemnta da ne blokiraju ekran *@
    @Scripts.Render("~/bundles/jquery")
</body>

✅ Zaključak

✅ Korištenjem Bundling i Minification tehnika u institucijama javne uprave znatno skupljamo i umanjujemo fajlove potrebne za responzivan Web Interface.
✅ Automatsko generisanje paketa se programira iz fajla App_Start/BundleConfig.cs.
✅ Cache Busting (Dodatni parameter ?v=hash) rješava probleme kod promjene koda, automatski forsirajuči korisnikov WebPreglednik da baci stari fajl i skine novi.

📚 Sljedeća Lekcija

U Narednom modulu po prvi put pristupamo punom Entity Frameworku i konekcijama kroz MVC aplikacije!