Code Splitting est une technique permettant d'optimiser les performances des applications React en décomposant le bundle JavaScript en morceaux plus petits. React fournit React.lazy comme moyen intégré d'implémenter le fractionnement du code au niveau des composants. Cela vous permet de charger dynamiquement des parties de votre application selon vos besoins.
const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> ); }
import React from "react"; import HeavyComponent from "./HeavyComponent"; function App() { return ( <div> <h1>Main App</h1> <HeavyComponent /> </div> ); } export default App;
Dans cette approche, l'intégralité du HeavyComponent est regroupée avec l'application principale, même si elle n'est pas immédiatement nécessaire.
import React, { Suspense } from "react"; const HeavyComponent = React.lazy(() => import("./HeavyComponent")); function App() { return ( <div> <h1>Main App</h1> <Suspense fallback={<div>Loading...</div>}> <HeavyComponent /> </Suspense> </div> ); } export default App;
Désormais, HeavyComponent n'est chargé que lorsqu'il est rendu. Cela réduit la taille du paquet initial.
Le fractionnement du code fonctionne de manière transparente avec React Router pour charger dynamiquement les composants de l'itinéraire.
import React, { Suspense } from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 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 Page...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </Suspense> </Router> ); } export default App;
Chargez paresseux plusieurs composants dans une seule application avec fractionnement logique.
import React, { Suspense, useState } from "react"; const ComponentA = React.lazy(() => import("./ComponentA")); const ComponentB = React.lazy(() => import("./ComponentB")); function App() { const [showA, setShowA] = useState(false); const [showB, setShowB] = useState(false); return ( <div> <button onClick={() => setShowA(true)}>Load Component A</button> <button onClick={() => setShowB(true)}>Load Component B</button> <Suspense fallback={<div>Loading...</div>}> {showA && <ComponentA />} {showB && <ComponentB />} </Suspense> </div> ); } export default App;
React ne fournit pas de gestion intégrée des erreurs pour les importations ayant échoué. Vous pouvez utiliser une Limite d'erreur pour gérer de tels cas.
const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> ); }
Le fractionnement de code avec React.lazy est un moyen puissant d'améliorer les performances de votre application. En chargeant dynamiquement les composants, vous pouvez réduire le temps de chargement initial et améliorer l'expérience utilisateur. Lorsqu'il est combiné avec Suspense et une gestion appropriée des erreurs, il fournit une solution robuste pour créer des applications React efficaces et évolutives.
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!