Co kdyby existovala jedna jediná technika, která by mohla pomoci zvýšit toto skóre o hodně?
Proč je velký balík JS špatný pro výkon
Řekněme, že máme jednostránkovou aplikaci se šesti obrazovkami. Každá obrazovka vyžaduje určité množství javascriptu, aby fungovala. Ale protože se jedná o jednostránkovou aplikaci, načteme veškerý javascript v jednom balíčku a zahrneme jej do našeho index.html .
Nyní, když se uživatel dostane na domovskou stránku, v ideálním případě chceme načíst pouze 100 kb javascriptu potřebného pro tuto obrazovku. Ale místo toho musí prohlížeč načíst a analyzovat celý balíček javascriptu.
I když uživatel nikdy nevstoupí na stránky „Admin“ nebo „Dashboard“, bude nutné načíst kód pro tyto stránky. Pokud navíc nepoužíváme techniky předběžného vykreslování, prohlížeč nezobrazí domovskou obrazovku, dokud se nenačte celý balíček. Proces načítání balíčku proto blokuje vykreslování a prodlužuje čas pro první obsahové malování.
Jak rozdělení kódu pomáhá
Co kdybychom mohli načíst kód pro každou obrazovku pouze tehdy, když uživatel přistane na této obrazovce. Řekněme, že uživatel přejde z domovské stránky na Příspěvky do jednoho příspěvku . V tomto případě nechceme načítat javascript pro Admin , Hlavní panel a O vůbec. Jak to uděláme?
Zde se hodí rozdělení kódu.
Namísto jednoho velkého balíčku javascriptu jej rozdělíme na menší části a načteme je na vyžádání.
Když se uživatel dostane na domovskou stránku , prohlížeč načte 100 kb home.js a okamžitě začne vykreslovat Domov obrazovka. Pokud pak, uživatel přejde na Příspěvky , prohlížeč načte 200 kb posts.js a vykreslí Příspěvky obrazovky atd. Už žádný nepoužívaný kód, žádné blokování vykreslování.
Jak použít rozdělení kódu
Pro různé balíčky javascriptu a frameworky jsou k dispozici různé techniky dělení kódu:
- Rozdělení kódu – Reagovat
- Rozdělení kódu na úrovni trasy v Angular
- Léné načítání a dělení kódu ve Vue.js
- Rozdělení kódu – Webpack
Sledujte mě na Twitteru