Sie verwenden React Lazy Imports in die falsche Weise.

In diesem Artikel wird die Optimierungsstrategie des React Lazy Loading erörtert. In einem Projekt verwendete der Entwickler zunächst die folgenden Möglichkeiten zum faulen Laden:

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

Bei der Verwendung von NPM Run Build, um ein Projekt zu erstellen, dauerte es 3,64 Sekunden.

Um die Konstruktionsgeschwindigkeit zu optimieren, verwendet der Entwickler die

-Methode: map

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

Nach der Modifikation wurde die Bauzeit auf 926 Millisekunden verkürzt, was signifikant verbessert wurde.

Die Gründe dahinter:

Die Verwendung der -Methode (oder

zum dynamischen Erzeugen von faulem Laden) kann das Verpackungswerkzeug (z. B. vite) ermöglichen, alle Abhängigkeiten gleichzeitig zu verarbeiten. Im Vergleich zur

-Anweisung jeder Komponente separat konzentriert die map -Methode alle Komponenten. Dadurch können die Verpackungswerkzeuge diese Komponenten effektiver verarbeiten und die erforderlichen Codeblöcke erstellen. reduce import() Zusammenfassung: map

Die eine Faulheit mit einer Line wird geladen, um die -Methode für die dynamische Einführung zu verwenden, und die Hauptmethode zur Optimierung des Konstruktionsprozesses umfasst:

Redundieren Sie den redundanten Betrieb während der Verpackung map

Bessere Erstellungs- und Gruppencodeblöcke

• Verbesserung der Parallelisierungseffizienz des Erstellungsprozesses des Codeblocks
optimieren Sie die Wiederverwendung von Codeblöcken
• Kennen Sie die Optimierungsmethode dieser reagierten faulen Last? Willkommen, um Ihre Gedanken im Kommentarbereich zu teilen! ?

Das obige ist der detaillierte Inhalt vonSie verwenden React Lazy Imports in die falsche Weise.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!