El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

La divisió de codi i la càrrega mandrosa són tècniques essencials per optimitzar el rendiment de les aplicacions React. Aquestes tècniques permeten carregar només les parts necessàries de l'aplicació quan es necessiten, reduint el temps de càrrega inicial i millorant l'experiència de l'usuari.

Què és la divisió de codi?

La divisió de codi (code splitting) és una tècnica que permet dividir el codi de l'aplicació en múltiples fitxers més petits. Això permet carregar només el codi necessari per a una determinada pàgina o funcionalitat, en lloc de carregar tot el codi de l'aplicació al mateix temps.

Beneficis de la divisió de codi:

Reducció del temps de càrrega inicial: Només es carrega el codi necessari per a la pàgina inicial.
Millora de l'experiència de l'usuari: Les pàgines es carreguen més ràpidament.
Optimització de l'ús de la memòria: Es carrega menys codi a la memòria al mateix temps.

Què és la càrrega mandrosa?

La càrrega mandrosa (lazy loading) és una tècnica que permet carregar components o mòduls només quan es necessiten. Això es pot fer utilitzant la funció React.lazy i el component Suspense de React.

Exemple de càrrega mandrosa:

import React, { Suspense } from 'react';

// Importació mandrosa del component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>Aplicació amb càrrega mandrosa</h1>
      <Suspense fallback={<div>Carregant...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Explicació del codi:

Importació mandrosa: Utilitzem React.lazy per importar el component LazyComponent de manera mandrosa.
Suspense: Utilitzem el component Suspense per mostrar un missatge de càrrega mentre el component mandrós es carrega.

Divisió de codi amb React Router

Quan utilitzem React Router, podem combinar la divisió de codi amb la càrrega mandrosa per carregar només els components necessaris per a cada ruta.

Exemple de divisió de codi amb React Router:

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Importació mandrosa dels components
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>Carregant...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Explicació del codi:

Importació mandrosa: Utilitzem React.lazy per importar els components Home, About i Contact de manera mandrosa.
Suspense: Utilitzem el component Suspense per mostrar un missatge de càrrega mentre els components mandrosos es carreguen.
React Router: Utilitzem BrowserRouter, Route i Switch per definir les rutes de l'aplicació.

Exercici pràctic

Objectiu:

Implementar la divisió de codi i la càrrega mandrosa en una aplicació React amb React Router.

Passos:

Crea una nova aplicació React utilitzant create-react-app.
Instal·la React Router: npm install react-router-dom.
Crea tres components: Home.js, About.js i Contact.js.
Implementa la divisió de codi i la càrrega mandrosa per a aquests components utilitzant React.lazy i Suspense.
Defineix les rutes per a aquests components utilitzant React Router.

Solució:

// src/Home.js
import React from 'react';

function Home() {
  return <h2>Home</h2>;
}

export default Home;

// src/About.js
import React from 'react';

function About() {
  return <h2>About</h2>;
}

export default About;

// src/Contact.js
import React from 'react';

function Contact() {
  return <h2>Contact</h2>;
}

export default Contact;

// src/App.js
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } 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>Carregant...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Resum

En aquesta secció, hem après sobre la divisió de codi i la càrrega mandrosa en React. Hem vist com aquestes tècniques poden millorar el rendiment de les aplicacions carregant només el codi necessari quan es necessita. També hem vist com implementar aquestes tècniques amb React Router per carregar components de manera mandrosa segons les rutes definides. Aquestes tècniques són essencials per optimitzar les aplicacions React i oferir una millor experiència d'usuari.

Divisió de codi i càrrega mandrosa

Què és la divisió de codi?

Beneficis de la divisió de codi:

Què és la càrrega mandrosa?

Exemple de càrrega mandrosa:

Explicació del codi:

Divisió de codi amb React Router

Exemple de divisió de codi amb React Router:

Explicació del codi:

Exercici pràctic

Objectiu:

Passos:

Solució:

Resum

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa