M
MLOG
React-suorituskyvyn optimointi: pakettikoon pienentämisen hallinta | MLOG | MLOG

Jokainen reitti tässä esimerkissä lataa vastaavan komponenttinsa laiskasti (lazily), mikä parantaa sovelluksen alkulatausaikaa.

2. Puun ravistelu (Tree Shaking)

Puun ravistelu (tree shaking) on tekniikka, joka poistaa kuolleen koodin (dead code) sovelluksestasi. Kuollut koodi viittaa koodiin, jota ei koskaan käytetä sovelluksessasi, mutta joka silti sisällytetään pakettiin. Tämä tapahtuu usein, kun tuot kokonaisia kirjastoja, mutta käytät vain pientä osaa niiden toiminnallisuudesta.

Nykyaikaiset JavaScript-paketointityökalut, kuten Webpack ja Rollup, voivat suorittaa puun ravistelun automaattisesti. Varmistaaksesi, että puun ravistelu toimii tehokkaasti, on tärkeää käyttää ES-moduuleja (import- ja export-syntaksi) CommonJS:n (require-syntaksi) sijaan. ES-moduulit antavat paketointityökalun analysoida koodisi staattisesti ja määrittää, mitkä exportit ovat todella käytössä.

Esimerkki:

Oletetaan, että käytät apukirjastoa nimeltä lodash. Sen sijaan, että toisit koko kirjaston:

            import _ from 'lodash';

_.map([1, 2, 3], (n) => n * 2);

Tuo vain ne funktiot, joita tarvitset:

            import map from 'lodash/map';

map([1, 2, 3], (n) => n * 2);

Tämä varmistaa, että vain map-funktio sisällytetään pakettiisi, mikä pienentää sen kokoa merkittävästi.

3. Dynaamiset tuonnit (Dynamic Imports)

Samoin kuin React.lazy(), dynaamiset tuonnit (käyttäen import()-syntaksia) mahdollistavat moduulien lataamisen tarvittaessa. Tämä voi olla hyödyllistä suurten kirjastojen tai komponenttien lataamisessa, joita tarvitaan vain tietyissä tilanteissa.

Esimerkki:

            async function handleClick() {
  const module = await import('./MyLargeComponent');
  const MyLargeComponent = module.default;
  // Use MyLargeComponent
}

Tässä esimerkissä MyLargeComponent ladataan vain, kun handleClick-funktio kutsutaan, tyypillisesti vastauksena käyttäjän toimintoon.

4. Minifiointi ja pakkaaminen

Minifiointi poistaa tarpeettomat merkit koodistasi, kuten välilyönnit, kommentit ja käyttämättömät muuttujat. Pakkaaminen pienentää koodisi kokoa soveltamalla algoritmeja, jotka löytävät kuvioita ja esittävät ne tehokkaammin.

Useimmat nykyaikaiset koontityökalut, kuten Webpack, Parcel ja Rollup, sisältävät sisäänrakennetun tuen minifioinnille ja pakkaamiselle. Esimerkiksi Webpack käyttää Terseriä minifiointiin ja se voidaan konfiguroida käyttämään Gzip- tai Brotli-pakkausta.

Esimerkki (Webpack-konfiguraatio):

            const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

Tämä konfiguraatio ottaa käyttöön minifioinnin Terserillä ja pakkauksen Gzipillä. threshold-asetus määrittää vähimmäiskoon (tavuina) tiedostolle, jotta se pakataan.

5. Kuvien optimointi

Kuvat voivat usein olla merkittävä osa sovelluksesi pakettikokoa. Kuvien optimointi voi parantaa suorituskykyä dramaattisesti.

Kuvien optimointitekniikat:

6. Valitse kirjastot viisaasti

Arvioi huolellisesti sovelluksessasi käyttämiäsi kirjastoja. Jotkin kirjastot voivat olla melko suuria, vaikka käyttäisitkin vain pientä osaa niiden toiminnallisuudesta. Harkitse pienempien, kohdennetumpien kirjastojen käyttämistä, jotka tarjoavat vain tarvitsemasi ominaisuudet.

Esimerkki:

Sen sijaan, että käyttäisit suurta päivämäärän muotoilukirjastoa, kuten Moment.js, harkitse pienemmän vaihtoehdon, kuten date-fns:n tai Day.js:n, käyttöä. Nämä kirjastot ovat huomattavasti pienempiä ja tarjoavat vastaavanlaista toiminnallisuutta.

Pakettikokojen vertailu:

7. HTTP/2

HTTP/2 on uudempi versio HTTP-protokollasta, joka tarjoaa useita suorituskykyparannuksia HTTP/1.1:een verrattuna, mukaan lukien:

HTTP/2:n käyttöönotto palvelimellasi voi parantaa merkittävästi React-sovelluksesi suorituskykyä, erityisesti käsiteltäessä monia pieniä tiedostoja. Useimmat modernit verkkopalvelimet ja CDN:t tukevat HTTP/2:ta.

8. Selaimen välimuisti

Selaimen välimuistin avulla selaimet voivat tallentaa staattisia resursseja (kuten kuvia, JavaScript-tiedostoja ja CSS-tiedostoja) paikallisesti. Kun käyttäjä palaa sovellukseesi, selain voi hakea nämä resurssit välimuistista sen sijaan, että lataisi ne uudelleen, mikä lyhentää latausaikoja merkittävästi.

Määritä palvelimesi asettamaan sopivat välimuistiotsikot staattisille resursseillesi. Cache-Control-otsikko on tärkein. Sen avulla voit määrittää, kuinka kauan selaimen tulisi säilyttää resurssi välimuistissa.

Esimerkki:

            Cache-Control: public, max-age=31536000

Tämä otsikko kertoo selaimelle, että resurssi tallennetaan välimuistiin vuodeksi.

9. Palvelinpuolen renderöinti (SSR)

Palvelinpuolen renderöinti (SSR) tarkoittaa React-komponenttien renderöintiä palvelimella ja alkuperäisen HTML:n lähettämistä asiakkaalle. Tämä voi parantaa alkulatausaikaa ja hakukoneoptimointia (SEO), koska hakukoneet voivat helposti indeksoida HTML-sisällön.

Kehykset, kuten Next.js ja Gatsby, tekevät SSR:n toteuttamisesta React-sovelluksissasi helppoa.

SSR:n hyödyt:

  • Parannettu alkulatausaika: Selain vastaanottaa valmiiksi renderöidyn HTML:n, mikä mahdollistaa sisällön nopeamman näyttämisen.
  • Parempi SEO: Hakukoneet voivat helposti indeksoida HTML-sisällön, mikä parantaa sovelluksesi sijoitusta hakutuloksissa.
  • Parannettu käyttökokemus: Käyttäjät näkevät sisällön nopeammin, mikä johtaa sitouttavampaan kokemukseen.

    • 10. Memoisaatio

    Memoisaatio on tekniikka, jolla välimuistiin tallennetaan kalliiden funktiokutsujen tulokset ja käytetään niitä uudelleen, kun samat syötteet esiintyvät jälleen. Reactissa voit käyttää React.memo()-korkeamman asteen komponenttia (higher-order component) funktionaalisten komponenttien memoisaatioon. Tämä estää tarpeettomat uudelleenrenderöinnit, kun komponentin propsit eivät ole muuttuneet.

    Esimerkki:

                import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Render component
  return 
    {props.data}
    ;
});

export default MyComponent;

    Tässä esimerkissä MyComponent renderöidään uudelleen vain, jos props.data-propsi muuttuu. Voit myös antaa mukautetun vertailufunktion React.memo():lle, jos tarvitset enemmän kontrollia siihen, milloin komponentin tulisi renderöityä uudelleen.

    Käytännön esimerkkejä ja kansainväliset näkökohdat

    Pakettikoon pienentämisen periaatteet ovat yleismaailmallisia, mutta niiden soveltaminen voi vaihdella projektisi ja kohdeyleisösi erityispiirteiden mukaan. Tässä on muutamia esimerkkejä:

    Työkalut ja resurssit

    Tässä on joitakin hyödyllisiä työkaluja ja resursseja pakettikoon pienentämiseen:

    Yhteenveto

    Pakettikoon pienentäminen on jatkuva prosessi, joka vaatii huolellista tarkkuutta. Tässä oppaassa esitettyjä tekniikoita soveltamalla voit parantaa merkittävästi React-sovelluksesi suorituskykyä ja tarjota paremman käyttökokemuksen. Muista analysoida säännöllisesti pakettikokoasi ja tunnistaa optimointikohteita. Pienemmän paketin hyödyt – nopeammat latausajat, parempi käyttäjien sitoutuminen ja yleisesti parempi kokemus – ovat vaivan arvoisia.

    Web-kehityksen käytäntöjen jatkuvasti kehittyessä on tärkeää pysyä ajan tasalla uusimmista tekniikoista ja työkaluista pakettikoon pienentämiseksi, jotta voidaan rakentaa suorituskykyisiä React-sovelluksia, jotka vastaavat globaalin yleisön vaatimuksiin.