Optimiser l'application React

Pour optimiser une application React, vous pouvez utiliser plusieurs stratégies clés axées sur les performances, la réduction de la taille du bundle, le rendu efficace et l'expérience utilisateur globale. Voici un aperçu des techniques d'optimisation spécifiques à React :

1. Partage de code

Le fractionnement du code vous permet de diviser votre application en morceaux plus petits qui peuvent être chargés selon les besoins, plutôt que de charger l'intégralité de l'application en même temps. Cela améliore le temps de chargement initial.

• React.lazy : utilisez la fonctionnalité de chargement paresseux intégrée de React pour importer dynamiquement des composants.

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

  function App() {
    return (
      <react.suspense fallback="{<div">Loading...}>
        <lazycomponent></lazycomponent>
      </react.suspense>
    );
  }

• React Loadable : vous pouvez également utiliser une bibliothèque comme react-loadable pour des options de fractionnement de code plus avancées.

2. Mémoisation et prévention des rendus inutiles

Éviter les nouveaux rendus inutiles est crucial pour améliorer les performances des applications React.

• React.memo : enveloppez les composants fonctionnels avec React.memo pour les empêcher de restituer si leurs accessoires n'ont pas changé.

  const MyComponent = React.memo(({ value }) => {
    return <div>{value}</div>;
  });

• useMemo : mémorisez les calculs coûteux afin qu'ils ne soient pas recalculés à chaque rendu, sauf si cela est nécessaire.

  const computedValue = useMemo(() => expensiveComputation(value), [value]);

• useCallback : mémorisez les fonctions pour éviter de transmettre de nouvelles références à chaque fois, notamment lorsqu'elles sont utilisées comme dépendances dans des composants ou des effets enfants.

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

3. Utiliser une gestion efficace de l'état

La gestion de l'état de manière à éviter les rendus inutiles peut grandement améliorer les performances.

• useReducer : pour une logique d'état complexe, envisagez d'utiliser useReducer au lieu de useState pour plus de contrôle sur les changements d'état.

  const [state, dispatch] = useReducer(reducer, initialState);

• Partage des composants : divisez les composants afin que seule la partie nécessaire soit restituée lorsque l'état change.

4. Virtualiser les longues listes

Le rendu de longues listes ou tableaux peut ralentir les performances. Utilisez des techniques de virtualisation de liste pour afficher uniquement ce qui est visible à l’écran.

• react-window ou react-virtualized : ces bibliothèques vous permettent de restituer efficacement de grands ensembles de données en virtualisant des listes.

  import { FixedSizeList as List } from 'react-window';

  const MyList = ({ items }) => (
    <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
      {({ index, style }) => <div style="{style}">{items[index]}</div>}
    </list>
  );

5. Secousse des arbres

Assurez-vous que votre application importe uniquement les parties des bibliothèques utilisées pour réduire la taille du bundle.

• Importations ES6 : importez uniquement les modules dont vous avez besoin à partir de bibliothèques (comme lodash, moment.js, etc.) plutôt que de la bibliothèque entière.

  // Instead of this:
  import _ from 'lodash';

  // Do this:
  import debounce from 'lodash/debounce';

6. Chargement paresseux des images

Les images sont souvent les atouts les plus importants d'une page. Utilisez le chargement différé pour retarder le chargement des images jusqu'à ce qu'elles soient dans la fenêtre.

• react-lazyload : utilisez la bibliothèque react-lazyload pour un chargement paresseux simple des images.

  import LazyLoad from 'react-lazyload';

  const ImageComponent = () => (
    <lazyload height="{200}" once>
      <img src="image-url.jpg" alt="Optimiser lapplication React">
    </lazyload>
  );

• Intersection Observer : vous pouvez également utiliser l'API Intersection Observer pour charger paresseusement les images au fur et à mesure qu'elles apparaissent.

  const LazyImage = ({ src, alt }) => {
    const [inView, setInView] = useState(false);
    const imgRef = useRef(null);

    useEffect(() => {
      const observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.disconnect();
        }
      });
      observer.observe(imgRef.current);
    }, []);

    return <img ref="{imgRef}" src="%7BinView" : alt="{alt}">;
  };

7. Réduire JavaScript

• Utilisez Terser ou la minification intégrée de Webpack pour réduire la taille de vos bundles JavaScript pendant le processus de construction.

• Create React App réduit automatiquement le code pour les builds de production :
  

  npm run build

8. Analyse groupée

Analysez la taille de vos bundles JavaScript pour identifier les domaines dans lesquels vous pouvez vous améliorer.

• Utilisez webpack-bundle-analyzer pour visualiser vos bundles et voir quelles bibliothèques occupent le plus de place.

  npm install --save-dev webpack-bundle-analyzer

Dans votre configuration Webpack :

  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  module.exports = {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  };

9. Réduire les CSS inutilisés

• Utilisez des outils comme PurgeCSS pour supprimer les CSS inutilisés de votre bundle. Vous pouvez l'intégrer à votre configuration Webpack ou PostCSS.

  npm install @fullhuman/postcss-purgecss

Exemple de configuration PostCSS :

  const purgecss = require('@fullhuman/postcss-purgecss')({
    content: ['./src/**/*.js', './public/index.html'],
    defaultExtractor: content => content.match(/[\w-/:]+(?



<h3>
  
  
  10. <strong>Optimiser les requêtes réseau</strong>
</h3>

<p>La réduction du nombre de requêtes réseau et l'optimisation des appels d'API peuvent entraîner des améliorations significatives des performances.</p>

• Debouncing API Calls: Use debouncing to limit how often API requests are sent during user input.

  const fetchResults = debounce((query) => {
    // API call logic
  }, 300);

• Caching API Data: Use libraries like SWR or React Query to cache API requests and avoid refetching data unnecessarily.

  import useSWR from 'swr';

  const fetcher = url => fetch(url).then(res => res.json());

  const MyComponent = () => {
    const { data, error } = useSWR('/api/data', fetcher);

    if (error) return <div>Error loading data</div>;
    if (!data) return <div>Loading...</div>;
    return <div>{data.message}</div>;
  };

11. Use React Fragments

Avoid adding unnecessary elements to the DOM by using React Fragments ( and >) when wrapping multiple elements.

const MyComponent = () => (
  
    <h1>Title</h1>
    <p>Content</p>
  >
);

12. Profiling and Performance Testing

Use the React Developer Tools profiler to identify performance bottlenecks in your app.

• React Profiler: In Chrome or Firefox, open the React DevTools and switch to the "Profiler" tab. Record a session and analyze where components are re-rendering and consuming more time.

---

Conclusion

Optimizing a React application requires careful attention to performance, bundle size, and rendering efficiency. By employing techniques like code splitting, memoization, lazy loading, tree shaking, and minimizing network requests, you can significantly improve the performance of your app. Make sure to regularly analyze and test your app’s performance to catch any potential inefficiencies.

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!