Optimalizace aplikací React SPA v benchmarkových nástrojích II.

Uvedené tipy jsme aplikovali na apku React vytvořenou pomocí CRA (Create React App), která používá webpack v4. CRA má předkonfigurováno několik technik

pro lepší výkonnost a rychlost aplikace. Pokud chcete upravit konfiguraci webpacku v CRA bez provedení příkazu eject, musíte použít knihovny,

například craco nebo customize-cra. Produkční build aplikace se zobrazuje pomocí webového serveru Nginx.

Stejně jako v první části, kde jsem se věnoval hlavně kompresi souborů, webovým fontům a CSS, jsem pro měření výkonnosti a rychlosti použil nástroje:

• Lighthouse
• Yellow Lab Tools

Ve výstupech z nástrojů najdete navrhovaná řešení, jak jednotlivé problémy odstranit.

ℹ Níže uvedené postupy nejsou jediné, a tedy pro některé z nich existuje alternativa k řešení reportovaných problémů z nástrojů.

Dynamické importy

Dynamické importování modulů umožňuje, aby byl příslušný soubor *.chunk.js

prohlížečem dotažen až ve chvíli, kdy je potřeba. Důsledkem toho je:

• menší velikost výsledného balíčku
• víc souborů .js, tzv. chunků – modul zaobalující ucelenou funkcionalitu
• rychlejší načítání stránek – stahuje se jen to, co je potřeba

Webpack v4 podporuje dynamické importy s využitím SplitChunksPlugin. Také CRA podporuje code splitting. Importy lze pojmenovat, měnit strategii načítání, prioritizovat load aj. přes parametry zapsané jako komentáře.

React.lazy

Umožňuje pro routy lazy loading komponent, které se mají na dané route renderovat. Je možné je upravovat prostřednictvím parametrů přes zmíněné komentáře.

Příklad importu

Odstranění nepoužívaného kódu, redukce velikosti balíčku

K nalezení nepoužívaného kódu/assetů můžete použít např. nástroj deadfile.

Pro analýzu velikosti jednotlivých balíčků JS jsou k dispozici:

• Webpack Bundle Analyzer – webpack plugin nebo CLI
• Nástroj Source map explorer přímo v CRA (hůře čitelný výstup)
• cra-bundle-analyzer – kombinace WebpackBundleAnalyzer + CRA

Podle výstupu zkuste zmenšit velké balíčky, např. reactjs, lodash, momentjs, chartjs... Pokud existuje vhodná alternativa (preact, lodash-es, just...) s menší velikostí → nahraďte ji. Pomoct může i způsob importu, kdy se namísto importu celého modulu importuje pouze požadovaná funkcionalita, např.:

⚠ Prioritou je zachování funkčnosti před menší velikostí balíčku! ⚠

Lazy load elementů

Existuje několik knihoven, které pomáhají s lazy načítáním elementům, jako je <img>, <picture>, iframe, video, audio aj. Pomáhají taky s alokováním místa

v layoutu pro nerenderované elementy, s responzivností, dotahují obsah

do scroll kontejnerů podle potřeby atd. Jejich implementace je na uvážení vývojáře s ohledem na výkonnostní přínos pro aplikaci. V případě potřeby implementace z uvedených funkcionalit je možné použít:

• lazysizes/react-lazysizes
• react-sizeme
• Lozad.js

Refaktoring

Pro dosažení lepšího výsledku v auditovacích nástrojích je často nutný refaktoring samotné aplikace nebo její části. Problémová místa v aplikaci nejsnáze najde programátor, který aplikaci zná do hloubky. Při refaktoringu

a hledání problémových míst v aplikaci můžou pomoct následující odkazy:

• <link rel=”prefetch/preload”> in webpack
• Avoid chaining critical requests
• Eliminate render-blocking resources
• Eliminate Render-blocking Resources using React and Webpack
• The Critical Request: How to Prioritise Requests to Improve Speed | Calibre

Nginx Pagespeed

PageSpeed je open-source serverový modul pro servery Nginx a Apache

od společnosti Google, který pomáhá optimalizovat web. Modul implementuje mnoho výkonnostních doporučení ze stránky Google PageSpeed Insights.

Zlepšuje latenci webových stránek tím, že mění zdroje na stránce tak,

aby odpovídaly osvědčeným postupům z hlediska výkonu webu.

• Optimalizace obrázků – komprese, převod do formátu WebP (pro podporující prohlížeče), změna velikosti obrázků
• Minimalizuje HTML
• Minimalizuje a slučuje CSS, JavaScript
• Optimalizuje ukládání souborů do paměti cache
• Zkombinuje externí JavaScript a optimalizuje ho
• Optimalizuje načítání souborů

Příklad konfigurace‍‍

/etc/nginx/pagespeed.conf

ℹℹKonfigurace byla nastavena na Docker image hitko/nginx-pagespeed s kompresí Brotli