ASP.NET– kazeta stále žije…..
Nadpis je asi trochu matoucí a snad na vysvětlenou pro ty mladší by bylo dobré zmínit, že kdysi dávno se hudba nekopírovala pomocí mp3, ale existovaly analogové kazety. Kopírování bylo zdlouhavé a s každou kopií klesala kvalita. Názvem tohoto média se inspiroval autor zajímavé knihovny(nepátral jsem proč a doufám, že to neznamená, že kvalita knihovny bude s každou verzí klesat).
Knihovnu nalezenete na stránkách http://getcassette.net/. Může vám pomoci při vývoji WebForms a nebo MVC webů (já ji použil pro zatím jeden malý projekt v MVC).
Řeší problém se správou skriptů a stylů –pro snazší údržbu a vývoj je vhodné mít styly uložené ve více css souborech, podobně i skripty. Jenže čím více toho musí prohlížeč pro zobrazení stránek stáhnout, tím je celková odezva stránek pomalejší a zátěž serveru a využití internetového spojení vyšší. A přesně tento problém Cassette řeší – při vývoji a ladění webu zachovává malé soubory – můžete tedy snadno využívat klientských ladících nástrojů například ve Firefoxu, ostrá verze pak obsahuje soubory jak sloučené, tak minimalizované.
V případě MVC pak navíc nemusí stránky(views) obsahovat spousty tagů se skript soubory či linky na css. Stačí jen deklarovat, které soubory jsou pro dané View potřeba:
- @{
- ViewBag.Title = "Index";
-
- Bundles.Reference("Scripts/Cards/export.js");
- Bundles.Reference("Scripts/Cards/flashcard.js");
- Bundles.Reference("Scripts/Cards/search.js");
- Bundles.Reference("Content/inputBox.css");
- Bundles.Reference("Content/card.css");
- Bundles.Reference("Content/cards.css");
- }
- <div id="inputBox">
V MasterView souboru pak stačí na příslušných místech, kde mají byt tagy, zavolat:
- <!DOCTYPE html>
- <html>
- <head>
- <title>@ViewBag.Title</title>
- @Bundles.RenderScripts()
- @Bundles.RenderStylesheets()
- </head>
- <body>
- <div class="wrapper">
Všimněte si tak=, že nemusíte přímo odkazovat na jQuery knihovnu – ve skriptech, které si vytvoříte se stačí na tuto knihovnu odkázat a bude tak zahrnuta do vašich skriptů:
(ten odkaz by jste tam dávali asi tak jako tak, díky tomu vám začne fungovat intelliSense nápověda pro JQuery metody).
Totéž platí i o stylech, i v nich můžete napsat odkaz na “nadřízený” styl:
Nyní můžeme v případě, že svůj web ladíme, získat všechny soubory:
Celková velikost jen skriptů je přes 600kB:
Naopak jakmile vývoj dokončíme a web nasadíme, začne nám Cassette soubory slučovat a minimalizovat:
Například JavaScripty jsou nyní jen v jednom souboru, který má velikost téměř sedmkrát menší:
Na webu autora knihovny a nebo fórech pak lze nalézt další tipy, třeba jak vypnout minimalizaci:
- bundles.Add<ScriptBundle>("Scripts", b => b.Processor = new ScriptPipeline().Remove<MinifyAssets>());
Další informace o této knihovně jsou k dispozici na webu knihovny, popřípadě na tomto blogu. Instalace je jednoduchá, základní použití je popsáno na webu autora.