A React és a Vue Frameworks tanulságai az oldalsebességhez

Az oldalsebességre való folyamatos törekvésünk során gyakran azon kapjuk magunkat, hogy visszakerülünk ugyanarra a pontra. Annak ellenére, hogy a termék-, marketing- és növekedési csapatok igyekeznek motiválni a technológiai csapatokat, a webhely teljesítményét javító feladatokat gyakran elhalasztják az átalakítás szükségessége miatt, és még ha kész is, nem mindig hoznak teljes eredményt. Ebben a ciklusban érdemes megvizsgálni néhány éleslátó perspektívát a valódi teljesítmény elérésére vonatkozóan. Milyen tanulságokat vonhatunk le például a React.js és a Vue.js, illetve azok SSR (szerveroldali rendering) bővítményeiből, mint a Next.js és a Nuxt.js más platformokhoz képest? Nem ideje optimalizálni a jQuery és CSS fájlok MB-jét? Mikor ébrednek fel azok a nagy cégek, amelyek feláldozzák webes teljesítményüket a rosszul tájékozott front-end fejlesztőknek? Nézzük meg ezeket a kérdéseket egyenként.

Miért gyorsak a Next.js és Nuxt.js alapú webhelyek?

A Next és Nuxt platformok, amelyek a React és a Vue alapokra épülő SEO-barát struktúrák, kiemelkednek gyorsasági teljesítményükkel. De miért olyan gyorsak ezek a platformok?

React.js és Vue.js komponens alapú keretrendszerek, amelyek az egyes oldalakat alkomponensekre bontják, az alábbiak szerint.

Vegyünk egy valós példát ennek illusztrálására: egy e-kereskedelmi listaoldalt. Ez a listázási oldal a következő alkomponenseket tartalmazza:

• Fejléc
• felsorolás
  • Listázási bejegyzés adatai
    • Lap cím
    • Breadcrumb
    • Termékek száma
  • Szűrő
    • Kategória szűrő
    • Árszűrő
    • ...
  • osztályozás
  • Termékkártyák
    • Termék fotó
  • Termék leírás
    • A termék neve
    • Termék ára
      • Áthúzott ár
      • Eladási ár
    • Leszámítolási kamatláb
    • Kampány információk
  • Lapszámozás
  • Kategória tartalom
• Lábléc

Ha Nuxt.js-szel komponens alapú alkalmazást hoz létre, ezek az összetevők külön-külön vannak kódolva, és szerepelnek a mesteroldalon. Vegyük például a ProductPhoto.js nevű fájlt. Bármilyen funkciókra van szükség a termékfotókhoz (körhinta, reszponzív képmegjelenítés stb.), a JS kód ebben a komponensben van megírva. Hasonlóképpen, csak az összetevő által használt CSS-fájlok szerepelnek benne. Ez azt jelenti, hogy csak az egyes összetevők által igényelt fájlok kerülnek végrehajtásra, ha az összetevőt használják.

Jelenleg hogyan kezelik ezt a folyamatot a legtöbb webes platformon?

A script.js fájl mindenhez kódot tartalmaz, a tagságtól, a szűrőktől és a kosároldalaktól a menüig, amely minden oldalon fut. Az eredmény? 

Weboldalak a 3 MB JS fájl és 1.5 MB CSS fájlt. A fő probléma nemcsak a fájlméret, hanem az a tény, hogy egy átlagos Android mobileszköz CPU-jától nem várható el, hogy ezredmásodperceken belül több ezer sornyi kódot hajtson végre. Ha csak a szükséges kódot futtatja, akkor teljesítménynövekedést érhet el.

Hogyan lehet megszüntetni a megjelenítést blokkoló erőforrásokat?

Ma az 32 millió legnépszerűbb webhely 1%-a használja a Font Awesome betűkészlet-könyvtárat, amely átlagosan 250 KB körül van. Tekintettel arra, hogy az aszinkron betöltést nem részesítik előnyben a pöccintés-effektus miatt, gondoljon arra, hogy hány betűtípus látható egy oldal első képernyőjén, amikor mobilon vagy asztali számítógépen nyílik meg. Egy 50 különböző platformon végzett rövid tanulmány átlagosan 3.4 ikont talált (leggyakrabban: kosár, felhasználó, menü, értesítés). Így csak négy ikon problémamentes betöltéséhez a teljes könyvtárat betöltjük.

Hogyan kezelik ezt a fejlett JS keretrendszerek? Azáltal, hogy csak az adott komponensben használt ikonok SVG formátumát importálja, így nincs szükség a teljes betűtípus vagy CSS-könyvtárak betöltésére.

Mit mond nekünk a Bootstrap vs. React JS-használat?

A Bootstrap JS könyvtár 26%-os piaci részesedéssel rendelkezik a világ összes webhelyén, míg a React használata 4% körüli. A Bootstrap népszerűsége rugalmassága és egyszerű használata miatt gyors fejlesztést tesz lehetővé. Ennek a rugalmasságnak azonban ára van: az általános JS-funkciók, a kiterjedt kódlefedettség és az olyan funkciókhoz tartozó funkciók, amelyeket esetleg soha nem használ, szerepel a projektben.

Tehát kérdezzük meg: Mit jelent a több mint 100%-os használat növekedés a top 10,000 1,000 to top XNUMX sites jelzi? Azt mutatja, hogy a legjobbak a részleteket a maguk javára fordítják, hogy még jobbak legyenek.

Összefoglalva: Ahelyett, hogy átírnánk oldalainkat olyan technológiákkal, mint pl Következő, Nuxt, Angular, React, Vuestb., meg kell értenünk, mit tesznek ezek a technológiák a sebesség érdekében, és alkalmaznunk kell ezeket a bevált módszereket webalkalmazásainkra.