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

HOME

En aquest tema, explorarem dues tècniques clau per optimitzar el rendiment de les aplicacions web: la càrrega per mandat (lazy loading) i la divisió de codi (code splitting). Aquestes tècniques ajuden a millorar els temps de càrrega inicials i a reduir la quantitat de codi que es carrega innecessàriament.

Què és la Càrrega Per Mandat?

La càrrega per mandat és una tècnica que permet carregar recursos només quan són necessaris. Això pot incloure imatges, scripts, components de l'aplicació, etc. Aquesta tècnica és especialment útil per a aplicacions grans on no tots els recursos són necessaris des del principi.

Avantatges de la Càrrega Per Mandat

Millora del temps de càrrega inicial: Només es carrega el codi necessari per a la pàgina inicial.
Reducció de l'ús de memòria: Els recursos no es carreguen fins que són necessaris, reduint l'ús de memòria.
Millora de l'experiència de l'usuari: Les pàgines es carreguen més ràpidament, millorant la percepció de rendiment.

Exemple de Càrrega Per Mandat

A continuació, es mostra un exemple de com implementar la càrrega per mandat en una aplicació React utilitzant React.lazy i Suspense:

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h1>Benvingut a la meva aplicació</h1>
      <Suspense fallback={<div>Carregant...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

En aquest exemple, LazyComponent només es carregarà quan sigui necessari, i mentre es carrega, es mostrarà el missatge "Carregant...".

Què és la Divisió de Codi?

La divisió de codi és una tècnica que permet dividir el codi de l'aplicació en diferents paquets que es poden carregar de manera dinàmica. Això permet carregar només les parts de l'aplicació que són necessàries en un moment determinat.

Avantatges de la Divisió de Codi

Reducció de la mida del paquet inicial: Només es carrega el codi necessari per a la pàgina inicial.
Millora del rendiment: Les parts de l'aplicació es carreguen de manera dinàmica quan són necessàries, millorant el rendiment general.

Exemple de Divisió de Codi

A continuació, es mostra un exemple de com implementar la divisió de codi en una aplicació Webpack:

Configuració de Webpack:

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Divisió de Codi en el Codi Font:

// src/index.js
import('./moduleA').then(moduleA => {
  moduleA.doSomething();
});

import('./moduleB').then(moduleB => {
  moduleB.doSomethingElse();
});

En aquest exemple, moduleA i moduleB es carregaran de manera dinàmica quan siguin necessaris, en lloc de carregar-se tots junts en el paquet inicial.

Exercici Pràctic

Exercici 1: Implementar Càrrega Per Mandat en una Aplicació React

Crea un nou component anomenat HeavyComponent.js que contingui contingut pesat (per exemple, moltes imatges o dades).
Modifica el component principal de la teva aplicació per carregar HeavyComponent de manera per mandat utilitzant React.lazy i Suspense.

Solució de l'Exercici 1

// HeavyComponent.js
import React from 'react';

function HeavyComponent() {
  return (
    <div>
      <h2>Component Pesat</h2>
      <p>Aquest és un component que conté contingut pesat.</p>
      {/* Afegir contingut pesat aquí */}
    </div>
  );
}

export default HeavyComponent;

// App.js
import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Benvingut a la meva aplicació</h1>
      <Suspense fallback={<div>Carregant component pesat...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Conclusió

La càrrega per mandat i la divisió de codi són tècniques poderoses per optimitzar el rendiment de les aplicacions web. Implementant aquestes tècniques, pots millorar significativament els temps de càrrega inicials i l'experiència de l'usuari. Practica aquestes tècniques en els teus projectes per veure els beneficis en acció.

En el proper tema, explorarem com gestionar la memòria en JavaScript per assegurar-nos que les nostres aplicacions siguin eficients i no consumeixin més recursos dels necessaris.

Càrrega Per Mandat i Divisió de Codi

Què és la Càrrega Per Mandat?

Avantatges de la Càrrega Per Mandat

Exemple de Càrrega Per Mandat

Què és la Divisió de Codi?

Avantatges de la Divisió de Codi

Exemple de Divisió de Codi

Exercici Pràctic

Exercici 1: Implementar Càrrega Per Mandat en una Aplicació React

Solució de l'Exercici 1

Conclusió

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final