Optimalizácia React SPA aplikácií v benchmark nástrojoch II.
Technology
3
 min read
November 11, 2021

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

Ján Cvenček
Ján Cvenček
Frontend Develooper

Prinášam ti druhú časť tipov, ako optimalizovať SPA (single page apps) založené (nielen) na frameworku React. Pomôcť zlepšiť výkon, a tým aj skóre v benchmarkingových nástrojoch. V tejto epizóde sa pozrieme na dynamické importy, odstraňovanie nepoužívaného kódu, refaktorovanie alebo Nginx Pagespeed

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é 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é:

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ť:

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:

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

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.