Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

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

  1. Martin Michálek http://www.vzhurudolu.cz #1

    avatar

    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?
    http://lesscss.org/functions/#…
    Nikoliv teda s kompilačními aplikacemi typu Prepros.

    před 3 lety | odpovědět | reagoval [3] David Grudl [7] Jan Panschab
  2. Tom Honek http://www.carreracoffee.cz #2

    avatar

    To data-uri() ale nefunguje konzistentně přes všechny mobilní prohlížeče.

    před 3 lety | odpovědět | reagoval [3] David Grudl
  3. David Grudl http://davidgrudl.com #3

    avatar

    #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 http://caniuse.com/datauri by neměl být problém.

    před 3 lety | odpovědět
  4. Tomáš Fejfar http://www.tomasfejfar.cz #4

    avatar

    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 http://stackoverflow.com/…rules-limits

  5. Jakub Bouček #5

    avatar

    #4 Tomáši Fejfare, IE<9? S tím dokážu žít.

    před 3 lety | odpovědět | reagoval [8] Martin Hujer
  6. xxar3s #6

    avatar

    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.

    před 3 lety | odpovědět
  7. Jan Panschab #7

    avatar

    Naprostý souhlas, preprocesor je nutnost. A ještě jedna poznámka k data-uri. Opravdu to používejte pouze pro ikonky – http://www.mobify.com/…w-on-mobile/.

    #1 Martine Michálku, Používání aplikací typu Prepros je anti-pattern.

    před 3 lety | odpovědět | reagoval [10] Martin Michálek
  8. Martin Hujer http://www.martinhujer.cz #8

    avatar
    před 3 lety | odpovědět
  9. David Grudl http://davidgrudl.com #9

    avatar

    #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.

    před 3 lety | odpovědět
  10. Martin Michálek http://www.vzhurudolu.cz #10

    avatar

    #7 Jane Panschabe, proč antipattern? Máš argumenty?

    před 3 lety | odpovědět | reagoval [11] Jan Panschab
  11. Jan Panschab #11

    avatar

    #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.

    před 3 lety | odpovědět | reagoval [12] Martin Michálek
  12. Martin Michálek http://www.vzhurudolu.cz #12

    avatar

    #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.

    před 3 lety | odpovědět | reagoval [13] Jan Panschab
  13. Jan Panschab #13

    avatar

    #12 Martine Michálku, A to je právě ta chyba, klást si malé cíle (nadsázka). Viz tento článek http://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.

    před 3 lety | odpovědět
  14. Mark #14

    avatar

    automaticky tohle umí dělat modul PageSpeed od Googlu pro servery Apache … https://developers.google.com/…speed/module

    před 2 lety | odpovědět

Zanechat komentář

Text komentáře
Kontakt

(kvůli gravataru)



*kurzíva* **tučné** "odkaz":http://example.com /--php phpkod(); \--