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:
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é 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:
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.
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
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é:
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!⚠
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ť:
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:
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.
Príklad konfigurácie
/etc/nginx/pagespeed.conf
ℹKonfigurácia bola nastavená na Docker image hitko/nginx-pagespeed s brotli kompresiou
