Heim >Web-Frontend >js-Tutorial >Sie verwenden React Lazy Imports in die falsche Weise.
<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
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!