Guide d'optimisation des performances de React : Comment améliorer la vitesse de chargement des applications frontales

Guide d'optimisation des performances React : Comment améliorer la vitesse de chargement des applications frontales

Introduction :
Avec le développement rapide de la technologie front-end, React, en tant que l'un des frameworks front-end les plus populaires, est largement utilisé dans le développement. Cependant, à mesure que l’échelle des applications React augmente, des problèmes d’optimisation des performances apparaissent progressivement. Cet article vous présentera quelques conseils pratiques et exemples de code pour améliorer la vitesse de chargement des applications React afin de vous aider à optimiser vos applications front-end.

1. Construire avec la production
   Lors du développement d'applications React, il est facile de confondre les environnements de développement et de production. Dans un environnement de production, afin d'optimiser les performances des applications, certaines options de configuration seront désactivées ou activées, telles que l'activation de la compression de code et de la fusion de fichiers. En utilisant l’environnement de production pour créer, la taille de l’application peut être considérablement réduite et la vitesse de chargement peut être améliorée.

// package.json
{
  "scripts": {
    "build": "react-scripts build"
  }
}

2. Code Splitting
   Utilisez la technologie de division de code pour regrouper les applications en morceaux plus petits, de sorte que le navigateur n'ait besoin que de charger le code requis pour la page actuelle, réduisant ainsi les requêtes réseau inutiles. Les composants React.lazy() et Suspense sont un moyen de retarder le chargement des composants officiellement fournis par React.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

3. Utilisez React.memo() pour l'optimisation des performances des composants
   Dans React, le rendu d'un composant est déclenché en fonction des changements dans ses accessoires et son état, même si les valeurs des accessoires et de l'état ne changent pas réellement, le composant sera restitué. En utilisant React.memo() pour encapsuler des composants, un rendu inutile peut être évité et les performances peuvent être améliorées.

import React, { memo } from 'react';

const MyComponent = memo(props => {
  return <div>{props.text}</div>;
});

4. Utilisez ShouldComponentUpdate() pour optimiser les performances des composants
   Pour les composants de classe, vous pouvez contrôler si le composant est restitué en remplaçant la méthode ShouldComponentUpdate(). Renvoyer true ne déclenchera un nouveau rendu que lorsque les accessoires ou l'état changeront réellement.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.text !== this.props.text;
  }

  render() {
    return <div>{this.props.text}</div>;
  }
}

5. Utilisez React.lazy() et React.memo() combinés pour optimiser les performances des composants
   Lorsque vous devez retarder le chargement des composants et également optimiser les performances de rendu, vous pouvez combiner React.lazy() et React.memo ( ) sont utilisés en combinaison pour obtenir la meilleure optimisation des performances.

import React, { lazy, Suspense, memo } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const MemoizedComponent = memo(props => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent {...props} />
    </Suspense>
  );
});

6. Optimiser les requêtes réseau
   Dans les applications React, le temps de réponse des requêtes réseau est souvent l'un des facteurs importants affectant la vitesse de chargement. Vous pouvez utiliser la fonction hook useEffect() de React pour optimiser les requêtes réseau. Une fois le composant monté, effectuez une requête API pour éviter les requêtes réseau inutiles.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Conclusion :
En utilisant les techniques mentionnées ci-dessus, la vitesse de chargement et les performances des applications React peuvent être grandement améliorées. Cependant, différents scénarios d'application peuvent nécessiter différentes méthodes d'optimisation, et la stratégie d'optimisation appropriée doit être sélectionnée en fonction des besoins réels. Pendant le processus de développement, ajuster et optimiser constamment le code peut nous aider à créer des applications frontales plus efficaces. J'espère que cet article vous sera utile et je vous souhaite d'obtenir des résultats plus remarquables sur la voie de l'optimisation des performances des applications React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!