Kdy používat preprocesory a kdy ne?
Složitá otázka, těžké kodérovo dilema, které se pokusím rozseknout: používejte preprocesory vždy!
Jak se Internet přesunul do mobilů, staly se největší zabijáci rychlosti načítání stránek tyhlety úhledné sloupečky:
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/content.css">
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/screen.css" media=screen>
<link rel="stylesheet" href="/css/fancybox/jquery.fancybox.css" media=screen>
<link rel="stylesheet" href="/css/print.css" media=print>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.autocomplete.js"></script>
<script src="/js/fancybox/jquery.fancybox.js"></script>
<script src="/js/tooltips/jquery.tooltips.js"></script>
<script src="/js/jquery.scrollspy.js"></script>
<script src="/js/main.js"></script>To nechceš! Chceš tohle:
<head><link rel="stylesheet" href="/assets/combined.css"></head>
<body>
...
<script src="/assets/combined.js"></script>
</body>Taky chceš, aby se ti všechny soubory posílaly zazipované a vypadaly hutně: combined.css a hustě: combined.js.
Byly doby, kdy se komprimované skripty psaly ručně. Vynechávaly se komentáře, v JavaScriptu používaly jednopísmenné proměnné atd.
Nedělejte to. Vaším úkolem je psát čitelný kód a komprimování JavaScriptu nechte na bedrech Google Closure Compiler, který to dokáže řádově lépe než vy a navíc upozorní na chyby, o minifikaci stylů se postará například Less.
Ten dokonce zvládá vychytávku, kdy u všech miniobrázků můžete nahradit:
textarea {
background: #fff url("img/input.gif") repeat-x;
}za
textarea {
background: #fff data-uri("img/input.gif") repeat-x;
}a preprocesor je přímo vloží do combined.css, čímž
odpadne hromada HTTP requestů na 100bajtové drobky.
Preprocesory prostě a jednoduše chcete!
Komentáře
Martin Michálek #1
Davide, máš tu data-uri() funkci nějak vyzkoušenou? IMHO to funguje jen při kompilaci přes node, tzn. na příkazové řádce, ne?
https://web.archive.org/…0/functions/
Nikoliv teda s kompilačními aplikacemi typu Prepros.
Tom Honek #2
To data-uri() ale nefunguje konzistentně přes všechny mobilní prohlížeče.
David Grudl #3
#1 Martine Michálku, jasně, třeba právě v textarea tady na blogu. Kompiluji to teda přes Node, vlastně ani jiný (produkční) způsob neznám.
#2 Tome Honku, a ve kterém mobilním prohlížeči to nefunguje? Podle https://caniuse.com/datauri by neměl být problém.
Tomáš Fejfar #4
Jen doplnění – na jednu věc je potřeba si s preprocessory dát pozor – pokud se moc rozlétnete s generováním jednotlivých pravidel a budete jich mít víc než 4095, tak vám je IE<9 zaříznou – prostě naimportují jen 4096 a zbylé zahodí. Takže je pak potřeba rozdělit výsledek na dva různé soubory. Více viz https://web.archive.org/…rules-limits
Jakub Bouček #5
#4 Tomáši Fejfare, IE<9? S tím dokážu žít.
xxar3s #6
na CSS používam stylus, na JS som si napísal preprocessor (podporujúci aj ďalšie JS nadstavby ako livescript a coffescript). pri JS je premna dôležité aby som nemusel nič spúšťať a čakať ale mohol vydieť výsledok priamo v prehliadači, takže moj preprocesor ma aj watcher ktorý monitoruje zmeny v adresárovej štruktúre a pri každej zmene sa automaticky všetky súbory pospájajú do jedného následne sa livescriptový súbor prevedie do javascriptu.
Jan Panschab #7
Naprostý souhlas, preprocesor je nutnost. A ještě jedna poznámka k data-uri. Opravdu to používejte pouze pro ikonky – https://www.salesforce.com/…ce-platform/?….
#1 Martine Michálku, Používání aplikací typu Prepros je anti-pattern.
Martin Hujer #8
#4 Tomáši Fejfare, #5 Jakub Bouček Platí to pro IE<=9
viz https://web.archive.org/…0164546.aspx
David Grudl #9
#4 Tomáši Fejfare, zkusil jsem to přepočítat na „fotbalová hřiště“ ;) Nevím, jak přesně pravidla spočítat, ale počet složených závorek by mohlo být dobré vodítko. Co jsem se tak díval na své weby, tak 4096 je naštěstí hodně vzdálená hranice, ale třeba celý Twitter Bootstrap už má cca 1400 pravidel.
Martin Michálek #10
#7 Jane Panschabe, proč antipattern? Máš argumenty?
Jan Panschab #11
#10 Martine Michálku, Vždycky je lešpí použít buildovací nástroj jako třeba Grunt nebo Gulp, který lze přidat do repozitáře (resp. nastavení toho co se má sledovat a jak kompilovat). Jednotné nastavení pak můžu sdílet na více prostředích, s více uživateli.
Martin Michálek #12
#11 Jane Panschabe, To „Vždycky“ je ve webařině dost nebezpečné slovo. :) Vše je odvislé od situace.
Pro spoustu typů pracovních postupů je Grunt/Gulp lepší, ano. Ale pak jsou frontendisti, kteří si s příkazovou řádkou úplně nerozumějí. A aplikace s UI typu Prepros mají opodstatnění i z pohledu přidaných vlastností typu live reload.
Jan Panschab #13
#12 Martine Michálku, A to je právě ta chyba, klást si malé cíle (nadsázka). Viz tento článek https://24ways.org/…rd-and-hard/. Livereload je součástí Grunt watch tasku (https://github.com/…ontrib-watch) už asi půl roku. Další výhoda Gruntu je ta, že je zdarma, dají se do něj lehce dopsat vlastní pluginy/tasky, a právě to, že běží na NodeJS – prostředí, ve kterém je psaná většina kompilátorů (LESS, Stylus) a lze tím pádem maximálně využít jejich potenciál – viz zmíněné embedování obrázků pomocí data-uri.
Mark #14
automaticky tohle umí dělat modul PageSpeed od Googlu pro servery Apache … https://developers.google.com/…speed/module
bubidubi #15
Hehe, že jsou CSS a JS zabijákem načítání? :D Lol…
Ono nemusí být vždy dobré VŠE tlačit do jednoho…
Ano, určitě je lepší komprimovat a spojovat tam, kde to má význam, ale v drtivé většině případů hlavní load dělají nevhodně velké zdroje obrázků a zabržděná server strana (tip: output buffering).
Další důležitá věc, co si musíte uvědomit, je, že některé věci je pro vás lepší načíst paralelně aby se obě 2 mohly začít zaráz používat co nejdříve a pak se teprv doloaduje zbytek…
Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.