Načítání stylů a scriptů u SPA aplikací rubrika: Programování: JavaScript

8 Martin Sura
položil/-a 28.4.2015

Ahoj,

Už delší dobu se nemůžu rozhodnout, který z přístupu je lepší při tvorbě SPA aplikací ohledně načítání stylů a scriptů.

1 : Před nasazením na produkci veškeré soubory s javascripty a styly nechám sloučit a minifikovat a pak je při prvním requestu načtu všechny.
Výhoda je, že při procházení aplikací se už načítají pouze data a aplikace tak rychle startuje. Nevýhodou je, že se načítají všechny scripty a styly i komponent, které jsou použité jen v okrajových případech. (Tak to dělám/e teď.) Další nevýhodou je i velikost úvodního requestu.

2 : Při procházením aplikace použít nějaký modul loader, který bude načítat minifikováný styly a scripty podle toho jak budou potřeba.
U tohot řešení je výhoda, že se načítají jen skutečně scripty a styly, které uživatel v danou chvíli potřebuje. Nevýhodou je, ale pomalejší procházení mezi stránka (musí se donačítat dané soubory)

Kterou metodu preferujete vy?

Komentáře

  • Anonym : IMHO dost záleží na typu aplikace, např. teď dělám v ember.js, takže načítám všechno na začátku, pak už jen JSON data přes $ — 4.5.2015
odkaz
8 v6ak
odpověděl/-a 29.4.2015

Má aplikace nějak fungovat offline? Pokud ano, pak je minifikace asi ta lepší volba.

Jak velká je ta aplikace celkově? Pokud malá, pak bych sosnul vše najednou.

Jak často se jednotlivé assety aktualizují. Pokud se některé malé aktualizují často, pak je na zvážení například jejich vyčlenění z minifikace.

Ještě mohu k těm dvěma přístupům navrhnout alternativu:

  1. Načíst základ v jednou souboru při prvním načtení stránky. (Možná dokonce ten základní JS a CSS inlineovat, ať je to při jednom dotazu.) Tím se zrychlí první načtení a budeme mít dobrý time-to-interact.
  2. Zbytek načítat líně, jakmile je potřeba.
  3. Nastavit dobré cacheování, ideálně s nějakým verzováním/fingerprintingem a dlouhým expires bez nutnosti revalidace. (Optimalizace pro opětovné návštěvy.)
  4. Postupně spekulativně přednačítat na pozadí zbylé soubory, kdyby byly náhodou potřeba. Existuje několik způsobů prefetchování, moderním prohlížečům dnes dokonce stačí dát hint a mohou se samy rozhodnout (třeba podle typu připojení), jestli to přednačtou, nebo ne.

Pro zobrazení všech 4 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.

Aktuální otázky v rubrice Programování: JavaScript

Otázky uživatele Martin Sura