M
MLOG
React teljesítményoptimalizálás: A csomóméret csökkentésének mesterfogásai | MLOG | MLOG

Ebben a példában minden útvonal lustán (lazily) tölti be a hozzá tartozó komponenst, javítva ezzel az alkalmazás kezdeti betöltési idejét.

2. Fa-rázás (Tree Shaking)

A fa-rázás (tree shaking) egy olyan technika, amely eltávolítja a holt kódot az alkalmazásból. A holt kód olyan kódra utal, amelyet soha nem használnak az alkalmazásban, de mégis bekerül a csomagba. Ez gyakran akkor fordul elő, ha teljes könyvtárakat importál, de csak a funkcionalitásuk egy kis részét használja.

A modern JavaScript csomagolók, mint a Webpack és a Rollup, automatikusan elvégezhetik a fa-rázást. Annak érdekében, hogy a fa-rázás hatékonyan működjön, fontos ES modulokat (import és export szintaxis) használni a CommonJS (require szintaxis) helyett. Az ES modulok lehetővé teszik a csomagoló számára, hogy statikusan elemezze a kódot, és megállapítsa, mely exportokat használják ténylegesen.

Példa:

Tegyük fel, hogy a lodash nevű segédkönyvtárat használja. A teljes könyvtár importálása helyett:

            import _ from 'lodash';

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

Importálja csak azokat a funkciókat, amelyekre szüksége van:

            import map from 'lodash/map';

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

Ez biztosítja, hogy csak a map funkció kerüljön be a csomagba, jelentősen csökkentve annak méretét.

3. Dinamikus importok

A React.lazy()-hoz hasonlóan a dinamikus importok (az import() szintaxis használatával) lehetővé teszik a modulok igény szerinti betöltését. Ez hasznos lehet nagy könyvtárak vagy komponensek betöltésére, amelyekre csak bizonyos helyzetekben van szükség.

Példa:

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

Ebben a példában a MyLargeComponent csak akkor töltődik be, amikor a handleClick funkció meghívásra kerül, általában egy felhasználói műveletre válaszul.

4. Minifikálás és tömörítés

A minifikálás eltávolítja a felesleges karaktereket a kódból, mint például a szóközöket, megjegyzéseket és a nem használt változókat. A tömörítés csökkenti a kód méretét olyan algoritmusok alkalmazásával, amelyek mintákat keresnek és hatékonyabban reprezentálják azokat.

A legtöbb modern build eszköz, mint a Webpack, a Parcel és a Rollup, beépített támogatást nyújt a minifikáláshoz és a tömörítéshez. Például a Webpack a Terser-t használja a minifikáláshoz, és konfigurálható Gzip vagy Brotli használatára a tömörítéshez.

Példa (Webpack konfiguráció):

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

Ez a konfiguráció engedélyezi a minifikálást a Terser és a tömörítést a Gzip használatával. A threshold opció határozza meg a tömörítendő fájl minimális méretét (bájtokban).

5. Képoptimalizálás

A képek gyakran jelentősen hozzájárulhatnak az alkalmazás csomóméretéhez. A képek optimalizálása drámaian javíthatja a teljesítményt.

Képoptimalizálási technikák:

6. Válasszon könyvtárakat bölcsen

Gondosan értékelje az alkalmazásában használt könyvtárakat. Néhány könyvtár meglehetősen nagy lehet, még akkor is, ha csak a funkcionalitásuk egy kis részét használja. Fontolja meg kisebb, célzottabb könyvtárak használatát, amelyek csak a szükséges funkciókat biztosítják.

Példa:

Ahelyett, hogy egy nagy dátumformázó könyvtárat, mint a Moment.js-t használna, fontolja meg egy kisebb alternatíva, mint a date-fns vagy a Day.js használatát. Ezek a könyvtárak lényegesen kisebbek és hasonló funkcionalitást nyújtanak.

Csomóméret összehasonlítás:

7. HTTP/2

A HTTP/2 a HTTP protokoll egy újabb verziója, amely számos teljesítményjavulást kínál a HTTP/1.1-hez képest, többek között:

A HTTP/2 engedélyezése a szerverén jelentősen javíthatja a React alkalmazás teljesítményét, különösen sok kis fájl kezelése esetén. A legtöbb modern webszerver és CDN támogatja a HTTP/2-t.

8. Böngésző gyorsítótárazás (Caching)

A böngésző gyorsítótárazása lehetővé teszi a böngészők számára, hogy a statikus eszközöket (mint például képek, JavaScript fájlok és CSS fájlok) helyben tárolják. Amikor egy felhasználó újra meglátogatja az alkalmazását, a böngésző a gyorsítótárból tudja lekérni ezeket az eszközöket ahelyett, hogy újra letöltené őket, jelentősen csökkentve a betöltési időt.

Konfigurálja a szerverét, hogy megfelelő gyorsítótár fejléceket állítson be a statikus eszközökhöz. A Cache-Control fejléc a legfontosabb. Ez lehetővé teszi annak megadását, hogy a böngésző mennyi ideig tárolja az adott eszközt a gyorsítótárban.

Példa:

            Cache-Control: public, max-age=31536000

Ez a fejléc azt jelzi a böngészőnek, hogy az eszközt egy évig tárolja a gyorsítótárban.

9. Szerveroldali renderelés (SSR)

A szerveroldali renderelés (SSR) során a React komponenseket a szerveren rendereljük, és a kezdeti HTML-t küldjük el a kliensnek. Ez javíthatja a kezdeti betöltési időt és a SEO-t, mivel a keresőmotorok könnyen be tudják járni a HTML tartalmat.

Az olyan keretrendszerek, mint a Next.js és a Gatsby, megkönnyítik az SSR implementálását a React alkalmazásokban.

Az SSR előnyei:

  • Javított kezdeti betöltési idő: A böngésző előre renderelt HTML-t kap, ami lehetővé teszi a tartalom gyorsabb megjelenítését.
  • Jobb SEO: A keresőmotorok könnyen bejárhatják a HTML tartalmat, javítva az alkalmazás keresőmotor-rangsorolását.
  • Fokozott felhasználói élmény: A felhasználók gyorsabban látják a tartalmat, ami vonzóbb élményhez vezet.

    • 10. Memoizáció

    A memoizáció egy olyan technika, amely során a költséges függvényhívások eredményeit gyorsítótárazzuk, és újra felhasználjuk őket, amikor ugyanazok a bemenetek ismét előfordulnak. Reactben a React.memo() magasabb rendű komponenst használhatja funkcionális komponensek memoizálására. Ez megakadályozza a felesleges újrarendereléseket, amikor a komponens prop-jai nem változtak.

    Példa:

                import React from 'react';

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

export default MyComponent;

    Ebben a példában a MyComponent csak akkor renderelődik újra, ha a props.data prop megváltozik. Egyéni összehasonlító függvényt is megadhat a React.memo()-nak, ha nagyobb kontrollra van szüksége afölött, hogy a komponens mikor renderelődjön újra.

    Valós példák és nemzetközi szempontok

    A csomóméret-csökkentés elvei univerzálisak, de alkalmazásuk a projekt specifikus kontextusától és a célközönségtől függően változhat. Íme néhány példa:

    Eszközök és források

    Íme néhány hasznos eszköz és forrás a csomóméret csökkentéséhez:

    Összegzés

    A csomóméret csökkentése egy folyamatos folyamat, amely gondos odafigyelést igényel a részletekre. Az ebben az útmutatóban vázolt technikák alkalmazásával jelentősen javíthatja React alkalmazásának teljesítményét és jobb felhasználói élményt nyújthat. Ne felejtse el rendszeresen elemezni a csomóméretét és azonosítani az optimalizálási területeket. A kisebb csomag előnyei – a gyorsabb betöltési idők, a fokozott felhasználói elköteleződés és a jobb általános élmény – megérik az erőfeszítést.

    Ahogy a webfejlesztési gyakorlatok folyamatosan fejlődnek, a legújabb technikákkal és eszközökkel való naprakészség a csomóméret csökkentése terén kulcsfontosságú a nagy teljesítményű React alkalmazások építéséhez, amelyek megfelelnek a globális közönség igényeinek.