React- ja Vue Frameworksin oppitunteja sivun nopeudelle

Pyrkiessämme jatkuvasti sivun nopeuteen huomaamme usein kiertelevämme takaisin samaan pisteeseen. Huolimatta tuote-, markkinointi- ja kasvutiimien ponnisteluista teknologiatiimien motivoimiseksi, tehtäviä, jotka voisivat parantaa sivuston suorituskykyä, lykätään usein uudelleenjärjestelytarpeen vuoksi, ja vaikka ne olisi tehty, ne eivät aina tuota täydellisiä tuloksia. Tässä syklissä on hyödyllistä pohtia joitakin oivaltavia näkökulmia todellisen suorituskyvyn saavuttamiseen. Mitä voimme oppia esimerkiksi React.js:n ja Vue.js:n tai niiden SSR (palvelinpuolen renderöinti) -laajennusten, kuten Next.js ja Nuxt.js, nopeudesta muihin alustoihin verrattuna? Eikö olisi aika optimoida jQuery- ja CSS-tiedostojen MB:t? Milloin suuret yritykset, jotka uhraavat verkkosuorituskykynsä huonosti perehtyneille etupään kehittäjille, heräävät? Käsitellään näitä kysymyksiä yksitellen.

Miksi Next.js- ja Nuxt.js-pohjaiset sivustot ovat nopeita?

Next- ja Nuxt-alustat, jotka ovat SEO-ystävällisiä rakenteita, jotka on rakennettu Reactille ja Vuelle, erottuvat nopeudestaan. Mutta miksi nämä alustat ovat niin nopeita?

React.js ja Vue.js ovat komponenttipohjaisia ​​kehyksiä, jotka jakavat jokaisen sivun alakomponentteihin, kuten alla on esitetty.

Otetaanpa todellinen esimerkki tämän asian havainnollistamiseksi: verkkokaupan listaussivu. Tämän listaussivun voidaan ajatella sisältävän seuraavat alakomponentit:

• Ylätunniste
• listaus
  • Listauksen tiedot
    • Sivun otsikko
    • Paluupolku
    • Tuotteiden määrä
  • Suodattaa
    • Luokkasuodatin
    • Hintasuodatin
    • ...
  • lajittelu
  • Tuotekortit
    • Tuotekuva
  • Tuotteen yksityiskohdat
    • Tuotteen nimi
    • Tuotteen hinta
      • Yliviivattu hinta
      • Myyntihinta
    • Alennus
    • Kampanjan tiedot
  • Sivunumerointi
  • Luokan sisältö
• Alatunniste

Kun luot komponenttipohjaisen sovelluksen Nuxt.js:n avulla, kukin näistä komponenteista koodataan erikseen ja sisällytetään sivupohjaan. Harkitse esimerkiksi tiedostoa nimeltä ProductPhoto.js. Mitä tahansa toimintoja tuotekuviin tarvitaan (karuselli, responsiivinen kuvanäyttö jne.), JS-koodi kirjoitetaan tähän komponenttiin. Samoin vain tämän komponentin käyttämät CSS-tiedostot sisältyvät siihen. Tämä tarkoittaa, että vain kunkin komponentin vaatimat tiedostot suoritetaan, jos komponenttia käytetään.

Miten tämä prosessi hoidetaan tällä hetkellä useimmilla verkkoalustoilla?

Script.js-tiedosto sisältää koodin kaikkeen jäsenyydestä, suodattimista ja ostoskorisivuista valikkoon, joka toimii kaikilla sivuilla. Lopputulos? 

Verkkosivustot, joissa on a 3 Mt JS-tiedosto ja 1.5 Mt CSS tiedosto. Suurin ongelma ei ole vain tiedostokoot, vaan se, että et voi odottaa keskimääräisen Android-mobiililaitteen suorittimen suorittavan tuhansia koodirivejä millisekunnissa. Suorittamalla vain tarvitsemasi koodin voit parantaa suorituskykyä.

Kuinka poistaa renderöintiä estävät resurssit?

Nykyään 32 % miljoonasta suosituimmasta verkkosivustosta käyttää Font Awesome -kirjasinkirjastoa, jonka keskimääräinen koko on noin 1 kt. Koska asynkroninen lataaminen ei ole suositeltua pyyhkäisyefektin vuoksi, mieti, kuinka monta fonttia näkyy sivun ensimmäisellä näytöllä, kun se avataan mobiililaitteella tai työpöydällä. Lyhyessä tutkimuksessa 250 eri alustalla havaittiin keskimäärin 50 käytettyä kuvaketta (yleisimmin ostoskori, käyttäjä, valikko, ilmoitus). Siten ladataksesi vain neljä kuvaketta ilman ongelmia, lataamme koko kirjaston.

Kuinka edistyneet JS-kehykset hallitsevat tämän? Tuomalla vain kyseisessä komponentissa käytettyjen kuvakkeiden SVG-muoto, jolloin ei tarvitse ladata kokonaisia ​​fontteja tai CSS-kirjastoja.

Mitä Bootstrap vs. React JS-käyttö kertoo meille?

Bootstrap JS -kirjaston markkinaosuus on 26 % kaikista sivustoista maailmanlaajuisesti, kun taas Reactin käyttö on noin 4 %. Bootstrap on suosittu joustavuuden ja helppokäyttöisyyden vuoksi, mikä mahdollistaa nopean kehityksen. Tämä joustavuus kuitenkin maksaa: yleiset JS-toiminnot, laaja koodikattavuus ja toimintoja ominaisuuksille, joita et ehkä koskaan käytä, sisältyvät projektiisi.

Joten, kysytään: Mitä yli 100 %:n käytön kasvu lisää Top 10,000 1,000 - Top XNUMX sivustot osoittavat? Se osoittaa, että parhaat kääntävät yksityiskohdat edukseen vieläkin paremmiksi.

Yhteenvetona, sen sijaan, että kirjoittaisimme sivustomme uudelleen teknologioilla, kuten Seuraavaksi Nuxt, Angular, React, Vuejne., meidän pitäisi ymmärtää, mitä nämä tekniikat tekevät oikein nopeuden saavuttamiseksi, ja soveltaa näitä parhaita käytäntöjä verkkosovelluksissamme.