Vous utilisez React Lazy Imports dans le mauvais sens.

Cet article traite de la stratégie d'optimisation de la charge de réaction paresseuse. Dans un projet, le développeur a initialement utilisé les moyens suivants pour le chargement paresseux:

<code class="language-javascript">const AnimatedScore = React.lazy(() => import('../components/AnimatedScore'))
const FireworksCanvas = React.lazy(() => import('../components/FireworksCanvas'))
// ... 其他组件</code>

Lorsque vous utilisez NPM Run build pour construire un projet, il a fallu 3,64 secondes.

Afin d'optimiser la vitesse de construction, le développeur utilise la méthode

: map

<code class="language-javascript">const [
  AnimatedScore,
  FireworksCanvas,
  // ... 其他组件
] = [
  'AnimatedScore',
  'FireworksCanvas',
  // ... 其他组件名
].map((component) => React.lazy(() => import(`../components/${component}`)))</code>

Après modification, le temps de construction a été raccourci à 926 millisecondes, ce qui a été considérablement amélioré.

Les raisons derrière:

L'utilisation de la méthode (ou

pour générer dynamiquement le chargement paresseux) peut permettre à l'outil d'emballage (tel que VITE) pour gérer toutes les dépendances en même temps. Par rapport à l'instruction

de chaque composant séparément, la méthode map concentre tous les composants. Cela permet aux outils d'emballage de gérer ces composants plus efficacement et de créer les blocs de code requis. reduce import() Résumé: map

La paresse à une ligne est chargée pour utiliser la méthode pour l'introduction dynamique, et le principal moyen d'optimiser le processus de construction comprend:

Réduisez le fonctionnement redondant pendant l'emballage map

Meilleure création et blocs de code de groupe

• Améliorer l'efficacité de parallélisation du processus de création du bloc de code
• Optimiser la réutilisation des blocs de code
Connaissez-vous la méthode d'optimisation de cette charge paresseuse React? Bienvenue pour partager vos réflexions dans le domaine des commentaires! ?

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!