Comment améliorer les performances de votre application React avec le fractionnement de code

À mesure que les applications React augmentent en taille et en complexité, la taille de leurs bundles JavaScript peut avoir un impact significatif sur les performances, en particulier sur les réseaux ou les appareils plus lents. Un moyen efficace d'atténuer ce problème consiste à diviser le code, une technique qui divise votre application en morceaux plus petits. Ces morceaux sont chargés à la demande, ce qui réduit le temps de chargement initial et améliore les performances globales.

Dans cet article, nous explorerons ce qu'est le fractionnement de code, pourquoi il est important et comment l'implémenter efficacement dans une application React.

Qu'est-ce que le fractionnement de code ?
Le fractionnement du code est une stratégie utilisée pour diviser votre code JavaScript en groupes plus petits qui peuvent être chargés dynamiquement en cas de besoin. Au lieu de transmettre un gros fichier JavaScript au navigateur, le fractionnement du code vous permet d'envoyer uniquement les parties du code immédiatement requises pour l'interaction de l'utilisateur. Cela réduit le temps de chargement initial de l’application.

React utilise des importations dynamiques et des outils comme Webpack pour permettre le fractionnement du code.

Avantages du fractionnement de code

1. Temps de chargement initial réduit : seul le code critique est chargé à l'avance.
2. Performances améliorées : les petits bundles se chargent plus rapidement, en particulier sur les réseaux lents.
3. Utilisation efficace des ressources : les ressources sont chargées selon les besoins, minimisant ainsi le code inutilisé.
4. Meilleure expérience utilisateur : les utilisateurs bénéficient d'interactions plus rapides avec votre application.
5. Implémentation du fractionnement de code dans React

1. Utiliser React.lazy et Suspense de React
React fournit React.lazy pour charger les composants paresseusement et Suspense pour afficher l'interface utilisateur de secours pendant que les composants chargés paresseusement sont récupérés.

Voici un exemple :
Étape 1 : chargement paresseux d'un composant

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

Explication :

• React.lazy(() => import('./LazyLoadedComponent')) : importe dynamiquement le composant uniquement lorsque cela est nécessaire.
• Chargement...

}> : affiche l'interface utilisateur de secours (par exemple, une icône de chargement) pendant le chargement du composant.

2. Répartition du code par itinéraires
Pour les applications plus volumineuses, diviser le code par itinéraire est l’un des moyens les plus efficaces d’améliorer les performances. Des bibliothèques comme React Router rendent ce processus transparent.

Étape 1 : Installer React Router

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

Étape 2 : implémenter le fractionnement de code avec des routes

npm install react-router-dom

Avantages :

• Seul le JavaScript de l'itinéraire actif est chargé.
• Réduit la taille du paquet initial.

3. Utilisation des importations dynamiques de Webpack
Si vous utilisez Webpack comme bundler de modules, il prend en charge les importations dynamiques prêtes à l'emploi. Webpack divise le code en morceaux qui peuvent être chargés dynamiquement.

Voici comment l'utiliser dans une application React :

Exemple :

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Lazy load components for routes
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Comment ça marche :

• Webpack crée un morceau séparé pour HeavyComponent.
• Le morceau est chargé uniquement lorsque loadComponent() est appelé.

4. Analyser votre bundle avec Webpack Bundle Analyzer
Avant de mettre en œuvre le fractionnement du code, il est essentiel de comprendre ce qui contribue à la taille de votre bundle. Webpack fournit un outil appelé Bundle Analyzer pour visualiser le contenu de vos bundles.

Étape 1 : Installer Webpack Bundle Analyzer

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

Étape 2 : Configurer Webpack
Ajoutez le plugin à votre configuration Webpack :

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

Étape 3 : Analysez votre forfait

Exécutez la commande build pour générer le rapport :

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

L'analyseur affichera une arborescence indiquant la taille de chaque module, vous aidant à identifier les opportunités d'optimisation.

5. Utilisation de bibliothèques tierces avec fractionnement de code
Les grandes bibliothèques tierces (par exemple, lodash, moment.js) peuvent augmenter la taille de votre bundle. Vous pouvez diviser ces bibliothèques en morceaux séparés ou utiliser l'arborescence pour supprimer les parties inutilisées de la bibliothèque.

Exemple : Import dynamique pour une bibliothèque

npm run build

Exemple de tremblement d'arbre :
Au lieu d'importer la bibliothèque entière :

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('Error loading lodash:', error);
  });

Meilleures pratiques pour le fractionnement de code

1. Commencez par le fractionnement basé sur l'itinéraire : c'est le moyen le plus simple et le plus efficace de réduire les temps de chargement initiaux.
2. Évitez les fractionnements excessifs : un trop grand nombre de morceaux peut entraîner des requêtes HTTP excessives.
3. Combinez le fractionnement de code avec le chargement paresseux : chargez uniquement ce qui est nécessaire pour l'interaction utilisateur actuelle.
4. Surveiller les performances : utilisez des outils tels que Lighthouse pour mesurer les améliorations après la mise en œuvre du fractionnement du code.
5. Utilisez des outils de construction modernes : des outils tels que Webpack, Vite et Parcel offrent une prise en charge intégrée du fractionnement de code.

Conclusion
Le fractionnement de code est une technique d'optimisation puissante qui peut considérablement améliorer les performances de vos applications React. En divisant votre application en morceaux plus petits et en les chargeant à la demande, vous pouvez réduire les temps de chargement initiaux, améliorer l'expérience utilisateur et rendre votre application plus efficace.

Commencez par le fractionnement basé sur l'itinéraire, puis expérimentez le fractionnement au niveau des composants ou de la bibliothèque pour adapter l'optimisation aux besoins de votre application. Combinez le fractionnement du code avec d'autres techniques de performances, comme le chargement paresseux et le tremblement d'arborescence, pour maximiser l'efficacité de votre application 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!