Optimalizácia React SPA aplikácií v benchmark nástrojoch II.

Spomenuté tipy sme aplikovali na React appku vytvorenú pomocou CRA (Create React App), ktorá využíva webpack v4. Viacero techník pre lepšiu výkonnosť 
a rýchlosť aplikácie má CRA predkonfigurovaných. Pre úpravu konfigurácie webpacku v CRA bez vykonania eject príkazu, je potrebné využiť knižnice, 
ako craco alebo customize-cra.  Produkčný build aplikácie je servovaný pomocou web servera Nginx.

Rovnako, ako aj pri pri prvej časti, v ktorej som sa venoval hlavne kompresii súborov, webovým fontom a CSS som pre zmeranie skóre ohľadom výkonnosti a rýchlosti použil nástroje:

• Lighthouse
• Yellow Lab Tools

Vo výstupoch z nástrojov nájdeš návrhy riešenia, ako jednotlivé problémy odstrániť.

ℹ Nasledujúce postupy nie sú jediné, a teda viaceré z nich majú alternatívu, ako vyriešiť reportované problémy z nástrojov.

Dynamické importy

Dynamické importovanie modulov umožňuje, že príslušný *.chunk.js súbor 
je prehliadačom dotiahnutý až v momente, keď je potrebný. Dôsledkom toho je:

• menšia veľkosť výsledného bundle
• viac .js súborov tzv chunkov - modul zaobaľujúci ucelenú funkcionalitu
• rýchlejšie načítanie stránky - doťahuje sa iba čo je potrebné

Webpack v4 podporuje dynamické importy s využitím SplitChunksPlugin. Rovnako aj CRA podporuje code splitting. Importy je možné pomenovať/meniť stratégiu načítania/prioritizovať load ai. cez parametre zapísané ako komentáre.

React.lazy

Umožňuje pre routy lazy loading komponentov, ktoré sa majú na danej route renderovať. Je možné ich upravovať parametrami cez spomínané komentáre.

Príklad importu

Odstránenie nepoužívaného kódu, redukcia veľkosti bundle

Pre nájdenie nepoužívaného kódu/assetov je možné použiť napr. nástroj deadfile.

Pre analýzu veľkosti jednotlivých JS bundlov sú dostupné:

• Webpack Bundle Analyzer - webpack plugin alebo CLI
• Source map explorer nástroj priamo v CRA (horšie čitateľný výstup)
• cra-bundle-analyzer - kombinácia WebpackBundleAnalyzer + CRA

Podľa výstupu sa pokúsiť zmenšiť veľké bundle napr. reactjs, lodash, momentjs, chartjs… Pokiaľ existuje vhodná alternatíva (preact, lodash-es, just, …) s menšou veľkosťou → nahradiť ju. Pomôcť môže aj spôsob importu, kedy namiesto importu celého modulu, je importovaná iba požadovaná funkcionalita, napr.:

import {join} from 'lodash' → import join from 'lodash/join'

⚠Prioritou je zachovanie funkčnosti pred menšou veľkosťou bundle!⚠

Lazy load elementov

Existuje viacero knižníc, ktoré pomáhajú s lazy načítaním elementov ako <img>, <picture>, iframe, video, audio ai. Ďalej napomáhajú s alokovaním miesta 
v layoute pre nevyrenderované elementy, s responzívnosťou, doťahujú obsah 
do scroll kontainerov podľa potreby atď. Ich implementácia je na zvážení vývojára ohľadom výkonnostného prínosu pre aplikáciu. V prípade potreby implementácie z uvedených funkcionalít je možné využiť:

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

Refaktoring

Pre lepší výsledok v auditovacích nástrojoch je častokrát potrebný refaktoring samotnej aplikácie/jej časti. Problémové miesta v aplikácii sa najjednoduchšie hľadajú programátorovi, ktorý aplikáciu pozná do hĺbky. Pri refaktoringu 
a hľadaní problémových miest v aplikácii môžu pomôcť nasledovné 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 pre servery Nginx a Apache 
od spoločnosti Google, ktorý pomáha optimalizovať web. Modul implementuje mnoho výkonnostných odporúčaní zo stránky Google PageSpeed Insights.

Zlepšuje latenciu webových stránok zmenou zdrojov na tejto stránke tak, 
aby zodpovedali najlepším postupom z hľadiska výkonu webu.

• Optimalizácia obrázkov - kompresia, prevod do formátu WebP (pre podporujúce prehliadače), zmena veľkosti obrázkov
• Minimalizuje HTML
• Minimalizuje a zlučuje CSS, JavaScript
• Optimalizuje ukladanie súborov do pamäte cache
• Skombinuje externý JavaScript a optimalizujte ho
• Optimalizuje načítanie súborov

Príklad konfigurácie‍

/etc/nginx/pagespeed.conf

ℹKonfigurácia bola nastavená na Docker image hitko/nginx-pagespeed s brotli kompresiou