M
MLOG
Reacti jõudluse optimeerimine: rakenduspaketi suuruse vähendamise meisterlikkus | MLOG | MLOG

Iga marsruut selles näites laadib oma vastava komponendi laisalt, parandades rakenduse esialgset laadimisaega.

2. Puu raputamine

Puu raputamine (tree shaking) on tehnika, mis eemaldab teie rakendusest surnud koodi. Surnud kood viitab koodile, mida teie rakenduses tegelikult kunagi ei kasutata, kuid mis on siiski paketti lisatud. See juhtub sageli siis, kui impordite terveid teeke, kuid kasutate ainult väikest osa nende funktsionaalsusest.

Kaasaegsed JavaScripti pakendajad nagu Webpack ja Rollup saavad puu raputamist automaatselt teostada. Et tagada puu raputamise efektiivne toimimine, on oluline kasutada ES mooduleid (import ja export süntaks) CommonJS (require süntaks) asemel. ES moodulid võimaldavad pakendajal teie koodi staatiliselt analüüsida ja kindlaks teha, milliseid eksporditud osi tegelikult kasutatakse.

Näide:

Oletame, et kasutate abiteeki nimega lodash. Selle asemel, et importida kogu teek:

            import _ from 'lodash';

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

Importige ainult need funktsioonid, mida vajate:

            import map from 'lodash/map';

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

See tagab, et teie paketti lisatakse ainult map funktsioon, vähendades oluliselt selle suurust.

3. DĂĽnaamilised importimised

Sarnaselt React.lazy()-le võimaldavad dünaamilised importimised (kasutades import() süntaksit) laadida mooduleid vastavalt vajadusele. See võib olla kasulik suurte teekide või komponentide laadimiseks, mida on vaja ainult teatud olukordades.

Näide:

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

Selles näites laaditakse MyLargeComponent alles siis, kui kutsutakse välja funktsioon handleClick, tavaliselt vastusena kasutaja tegevusele.

4. Minifitseerimine ja tihendamine

Minifitseerimine eemaldab teie koodist mittevajalikud märgid, näiteks tühikud, kommentaarid ja kasutamata muutujad. Tihendamine vähendab teie koodi suurust, rakendades algoritme, mis leiavad mustreid ja esitavad neid tõhusamalt.

Enamik kaasaegseid ehitustööriistu, nagu Webpack, Parcel ja Rollup, sisaldavad sisseehitatud tuge minifitseerimiseks ja tihendamiseks. Näiteks kasutab Webpack minifitseerimiseks Terserit ja seda saab konfigureerida kasutama Gzip- või Brotli-tihendust.

Näide (Webpacki konfiguratsioon):

            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,
    }),
  ],
};

See konfiguratsioon võimaldab minifitseerimist Terseri abil ja tihendamist Gzipi abil. Valik threshold määrab minimaalse suuruse (baitides), mille puhul fail tihendatakse.

5. Piltide optimeerimine

Pildid võivad sageli olla oluline osa teie rakenduse paketi suurusest. Piltide optimeerimine võib jõudlust dramaatiliselt parandada.

Piltide optimeerimise tehnikad:

6. Valige teeke targalt

Hinnake hoolikalt teeke, mida oma rakenduses kasutate. Mõned teegid võivad olla üsna suured, isegi kui kasutate ainult väikest osa nende funktsionaalsusest. Kaaluge väiksemate, spetsiifilisemate teekide kasutamist, mis pakuvad ainult neid funktsioone, mida vajate.

Näide:

Selle asemel, et kasutada suurt kuupäevade vormindamise teeki nagu Moment.js, kaaluge väiksema alternatiivi, näiteks date-fns või Day.js, kasutamist. Need teegid on oluliselt väiksemad ja pakuvad sarnast funktsionaalsust.

Paketi suuruse võrdlus:

7. HTTP/2

HTTP/2 on HTTP-protokolli uuem versioon, mis pakub mitmeid jõudlusparandusi võrreldes HTTP/1.1-ga, sealhulgas:

HTTP/2 lubamine oma serveris võib oluliselt parandada teie Reacti rakenduse jõudlust, eriti paljude väikeste failidega tegelemisel. Enamik kaasaegseid veebiservereid ja CDN-e toetavad HTTP/2-te.

8. Brauseri vahemälu kasutamine

Brauseri vahemälu võimaldab brauseritel salvestada staatilisi varasid (nagu pildid, JavaScripti failid ja CSS-failid) lokaalselt. Kui kasutaja külastab teie rakendust uuesti, saab brauser need varad hankida vahemälust selle asemel, et neid uuesti alla laadida, vähendades oluliselt laadimisaegu.

Konfigureerige oma server seadistama sobivad vahemälu päised oma staatilistele varadele. Kõige olulisem on Cache-Control päis. See võimaldab teil määrata, kui kaua peaks brauser vara vahemälus hoidma.

Näide:

            Cache-Control: public, max-age=31536000

See päis ütleb brauserile, et vara tuleks vahemälus hoida ühe aasta.

9. Serveripoolne renderdamine (SSR)

Serveripoolne renderdamine (SSR) hõlmab teie Reacti komponentide renderdamist serveris ja esialgse HTML-i saatmist kliendile. See võib parandada esialgset laadimisaega ja SEO-d, kuna otsingumootorid saavad HTML-sisu hõlpsasti indekseerida.

Raamistikud nagu Next.js ja Gatsby muudavad SSR-i rakendamise teie Reacti rakendustes lihtsaks.

SSR-i eelised:

  • Parem esialgne laadimisaeg: brauser saab eelrenderdatud HTML-i, mis võimaldab sisu kiiremini kuvada.
  • Parem SEO: otsingumootorid saavad HTML-sisu hõlpsasti indekseerida, parandades teie rakenduse asetust otsingumootorites.
  • Parem kasutajakogemus: kasutajad näevad sisu kiiremini, mis viib kaasavama kogemuseni.

    • 10. Memoization

    Memoization on tehnika, mis salvestab kulukate funktsioonikutsete tulemused vahemällu ja taaskasutab neid, kui samad sisendid uuesti esinevad. Reactis saate kasutada kõrgema järgu komponenti React.memo() funktsionaalsete komponentide memoïseerimiseks. See hoiab ära tarbetud uuesti renderdamised, kui komponendi propsid pole muutunud.

    Näide:

                import React from 'react';

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

export default MyComponent;

    Selles näites renderdatakse MyComponent uuesti ainult siis, kui props.data prop muutub. Saate pakkuda ka kohandatud võrdlusfunktsiooni React.memo()-le, kui vajate rohkem kontrolli selle üle, millal komponent peaks uuesti renderdama.

    Reaalse maailma näited ja rahvusvahelised kaalutlused

    Paketi suuruse vähendamise põhimõtted on universaalsed, kuid nende rakendamine võib varieeruda sõltuvalt teie projekti konkreetsest kontekstist ja sihtrühmast. Siin on mõned näited:

    Tööriistad ja ressursid

    Siin on mõned kasulikud tööriistad ja ressursid paketi suuruse vähendamiseks:

    Kokkuvõte

    Paketi suuruse vähendamine on pidev protsess, mis nõuab hoolikat tähelepanu detailidele. Rakendades selles juhendis kirjeldatud tehnikaid, saate oma Reacti rakenduse jõudlust märkimisväärselt parandada ja pakkuda paremat kasutajakogemust. Ärge unustage regulaarselt analüüsida oma paketi suurust ja tuvastada optimeerimist vajavaid valdkondi. Väiksema paketi eelised – kiiremad laadimisajad, parem kasutajate kaasatus ja parem üldine kogemus – on pingutust väärt.

    Kuna veebiarenduse praktikad arenevad pidevalt, on paketi suuruse vähendamise uusimate tehnikate ja tööriistadega kursis olemine ülioluline, et ehitada suure jõudlusega Reacti rakendusi, mis vastavad globaalse publiku nõudmistele.