Jak pravděpodobně víte, webový prohlížeč je z větší části jednovláknový, což znamená, že veškerá těžká práce probíhá v jediném vláknu, neboli hlavním vláknu.
To znamená, že webový prohlížeč spouští kód JavaScript v hlavním vlákně, ve stejném vlákně, kde dochází k analýze, rozložení a malování.
To znamená, že pokud máte velký soubor JavaScriptu, hlavní vlákno bude zaneprázdněno vyhodnocováním vašeho kódu, než bude uživatel moci interagovat se stránkou.
Bude muset počkat, i když nebude hned na začátku potřebovat všechny funkce v tomto balíčku.
Takže velký soubor JS =pomalejší načítání stránky .
Představte si, že máte formulář pro přihlášení k odběru newsletteru, který se zobrazí, jakmile uživatel klikne na Přihlásit se k odběru knoflík.
Tato funkce není vyžadována pro načtení stránky a my ani nevíme, zda se uživatel chce přihlásit nebo ne.
Jak bylo řečeno, proč by uživatel chtěl, aby čekal na část kódu, kterou možná nepoužije.
Zadejte Rozdělení kódu
Dělení kódu je proces rozdělení kódu do několika menších svazků.
Hlavní výhodou rozdělení kódu (mimo jiné) je lepší kontrola nad priorizací zatížení zdrojů - načítání kritických při načítání a načítání ostatních později.
Díky rozdělení kódu budete moci definovat, které moduly by se měly načíst zpočátku, jaké moduly by se měly načíst na vyžádání (například když uživatel klikne na tlačítko) nebo předem načíst, když je prohlížeč nečinný.
Pokud s moduly začínáte, modul je část kódu uložená v souboru, který můžete importovat do svého souboru a využívat funkce, které poskytuje – takže nebudete muset dělat vše od začátku.
Jedním z přístupů k rozdělení kódu je použití dynamických importů.
V moderních aplikacích založených na JavaScriptu běžně importujeme moduly staticky.
Ujasněme si to na příkladu.
Představte si, že máme kus kódu ke sledování zdroje návštěvnosti, když uživatel klikne na tlačítko na vstupní stránce.
// ...
import { tracker } from './utils'
let cta = document.querySelector('.cta')
if (cta) {
cta.addEventListener('click', event => {
let utmParams = tracker.getUtmParams()
// Do some cool stuff
})
}
// ...
Výše uvedený fragment JavaScriptu připojuje posluchač události kliknutí k tlačítku s třídou cta . Obslužná rutina používá modul s názvem tracker umístěný v utils soubor (staticky importovaný) ke sledování zdroje provozu.
Staticky importovaný modul, například tracker je součástí hlavního balíku (vaším balíkem modulů).
Problém s výše uvedeným kódem je, že i když uživatel na tlačítko nikdy neklikne, kód se stáhne a spustí v hlavním vláknu.
To však není příliš optimální.
Přepišme kód dynamickým přístupem:
// ...
let btn = document.querySelector('button')
btn.addEventListener('click', e => {
return import('./tracker' )
.then(({tracker}) => {
tracker.getUtmParams()
})
})
// ...
Tentokrát je modul dynamicky importován jako součást obsluhy události, když uživatel skutečně klikne na tlačítko.
Když váš modulový balíček (v tomto příkladu používám Webpack) narazí na dynamický import, sbalí modul jako samostatný soubor.
Také vygeneruje nezbytný kód (v hlavním balíčku), aby mohl tento soubor dynamicky (a asynchronně) načíst později – prostřednictvím samostatných požadavků HTTP.
Stále však existuje malý problém.
Od tracker je stahován v reakci na interaktivní událost (v tomto případě kliknutí myší), může uživatel zaznamenat malé zpoždění při stahování modulu.
Abychom tento problém vyřešili a uživatelům usnadnili práci, můžeme použít odkaz s nápovědou ke zdroji, který dá webovému prohlížeči pokyn k předběžnému načtení modulu v době nečinnosti.
Opět, pokud používáte Webpack (přímo nebo nepřímo), můžete při deklarování importů použít inline direktivu, například:
// ...
let btn = document.querySelector('button')
btn.addEventListener('click', e => {
return import(/* webpackPrefetch: true */ './tracker' )
.then(({tracker}) => {
tracker.getUtmParams()
})
})
// ...
To dává Webpacku pokyn, aby vložil odkaz na nápovědu ke zdroji do vašeho dokumentu za běhu, aby modul předběžně načetl v době nečinnosti.
To lze otestovat v nástrojích DevTools:
Tento jednoduchý trik může při správném použití výrazně zlepšit metriky výkonu vaší stránky, jako je Time to Interactive (TTI).
Doufám, že se vám tento jednoduchý trik bude hodit a pomůže vám ušetřit čas vám i vašim uživatelům.
Pokud máte připomínky nebo dotazy, nebo pokud je něco, co jsem udělal špatně, dejte mi prosím vědět v komentářích níže.
Děkuji za přečtení :)