Optimisation rapide de votre application ReactJS pour les performances et la taille

React étant massivement utilisé pour les applications gourmandes en front-end, il s'accompagne de méthodes uniques d'optimisation des performances et de la taille. L'amélioration des deux aura un impact mesurable considérable sur la taille du package React. Plus la taille du bundle est faible, plus le temps de chargement est rapide, étant donné que nous nous concentrons sur les applications rendues par le client.

Le rendu côté serveur améliorerait encore le temps de chargement. Dans le rendu côté serveur, lorsqu'un utilisateur demande une page Web, les composants React sont rendus sous forme de code HTML dans le serveur lui-même. Ensuite, cette page pré-rendue est envoyée au navigateur, permettant à l'utilisateur de voir la page immédiatement sans la surcharge du temps de chargement JS.

Mais c’est une toute autre histoire. Concentrons-nous principalement sur l'amélioration de notre site rendu côté client en travaillant sur l'amélioration de la taille du package en apportant des modifications au code. Allons plus loin.

1. Fractionnement de code et importations dynamiques

Le « regroupement » du code React est le processus consistant à suivre toutes les importations et tous les codes et à les combiner en un seul fichier appelé « Bundle ». Webpack, Browserify, etc., le font déjà pour nous.

Webpack dispose d'une fonctionnalité appelée « Code Splitting » qui est chargée de diviser un seul paquet en morceaux plus petits, de dédupliquer les morceaux et de les importer « à la demande ». Cela impacte considérablement le temps de chargement de l'application.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Chargement paresseux des composants avec React Suspense (React 18) : Ceci, combiné à des importations dynamiques, montrera une amélioration visible du temps de chargement des composants.

Généralement, lorsque nous importons des composants enfants au sein d'un composant parent, nous l'importons de manière statique. Pour éviter d'importer ce composant jusqu'à ce que nous devions réellement le restituer, nous pouvons utiliser une combinaison d'importations dynamiques avec React Suspense. React Suspense permet de charger un composant à la demande. Il affiche une interface utilisateur de secours tandis que les composants correspondants sont importés dynamiquement puis rendus.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

2. Secouement des arbres

Il s'agit d'une technique utilisée par les bundlers JavaScript pour supprimer tout le code inutilisé avant de créer des bundles. Le code ES6 peut être modifié en arborescence ; cependant, le code basé sur CommonJS (c'est-à-dire qui utilise « require ») ne peut pas être modifié en arborescence.

Webpack Bundle Analyzer est un plugin qui vous aidera à visualiser la taille d'un webpack avec une carte interactive.

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer

Configurez ensuite votre webpack pour ajouter ce qui précède en tant que plugin :

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];

Assurez-vous que votre script est configuré pour exécuter Webpack :

"build": "webpack --config webpack.config.js --mode production"

Exécutez Yarn build pour générer un rapport.html qui vous aidera à visualiser efficacement la taille de votre paquet.

Cela ressemblera à ceci :

3. Rendu simultané

Commençons par comprendre ce qu’est le blocage du rendu. Le blocage du rendu se produit lorsque le thread principal (mises à jour UX) est bloqué parce que React effectuait des tâches moins importantes en arrière-plan. C'était le cas jusqu'à React 16.

React 18 a introduit des fonctionnalités concurrentes, ce qui signifie qu'il :

• Vous donne plus de contrôle sur la façon dont les mises à jour en arrière-plan sont planifiées et créera une expérience utilisateur fluide en ne bloquant pas le fil de discussion principal.
• Initier le regroupement automatique des mises à jour d'état : le regroupement fait référence au regroupement de plusieurs rendus en raison de plusieurs mises à jour d'état de manière à ce que l'état ne soit mis à jour qu'une seule fois.

Utilisez le hook startTransition() pour gérer les mises à jour de React comme non urgentes, aidant ainsi React à prioriser les mises à jour urgentes telles que les entrées et les interactions de l'utilisateur avec les composants par rapport aux précédentes.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Dans cet exemple, lorsque la valeur d'entrée change, la fonction handleChange est appelée. La fonction startTransition est utilisée pour marquer la mise à jour de l'état de la liste comme non urgente. Cela permet à React de donner la priorité à la mise à jour de l'état de la valeur, garantissant que l'entrée reste réactive même lorsque la liste est longue.

Utilisez le hook useDeferredValue pour différer une valeur (généralement un calcul coûteux) jusqu'à ce que l'interface utilisateur soit moins occupée.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

Dans cet exemple, le hook useDeferredValue est utilisé pour différer l'état de la valeur jusqu'à ce que l'interface utilisateur soit moins occupée. Cela permet de garder l'entrée réactive en différant le rendu de la grande liste jusqu'à ce que la mise à jour de l'entrée soit traitée.

Principaux avantages du rendu simultané :

• Réactivité améliorée : en permettant à React d'interrompre le travail de rendu, l'interface utilisateur reste réactive aux interactions de l'utilisateur.
• Priorisation : React peut donner la priorité aux mises à jour urgentes par rapport aux mises à jour non urgentes, garantissant ainsi une expérience utilisateur plus fluide.
• Meilleures performances : les mises à jour coûteuses peuvent être différées, réduisant ainsi l'impact sur le thread principal et améliorant les performances globales de l'application.

4. Prise en charge du préchargement des ressources (React 19)

Si vous êtes conscient de ressources lourdes que votre application serait en train de récupérer pendant le chargement, alors une bonne idée serait de précharger la ressource. Ces ressources peuvent être des polices, des images, des feuilles de style, etc.

Scénarios où le préchargement serait bénéfique :

• Un composant enfant utiliserait une ressource. Dans ce cas, vous pouvez le précharger lors de la phase de rendu du composant parent.
• Préchargez-le dans un gestionnaire d'événements, qui redirige vers une page/un composant qui utiliserait cette ressource. C'est en fait une meilleure option que de le précharger lors du rendu.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Fait intéressant : Après avoir mis en œuvre le préchargement, de nombreux sites, dont Shopify, Financial Times et Treebo, ont constaté des améliorations d'une seconde dans les métriques centrées sur l'utilisateur telles que le temps d'interactivité et la latence perçue par l'utilisateur.

Veuillez laisser un commentaire <3

J'espère que vous avez trouvé ce blog utile ! Vos retours me sont précieux , alors s'il vous plaît laissez vos réflexions et suggestions dans les commentaires ci-dessous.

N'hésitez pas à me contacter sur LinkedIn pour plus d'informations et de mises à jour. Restons connectés et continuons à apprendre et à grandir ensemble !

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!