El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Càrrega Peresosa

Següent ►
►

La càrrega peresosa (lazy loading) és una tècnica d'optimització que permet carregar només les parts necessàries del codi quan es necessiten, en lloc de carregar tot el codi al principi. Això pot millorar significativament el rendiment de les aplicacions, especialment les aplicacions grans amb molts mòduls.

Conceptes Clau

  • Càrrega Peresosa: Carregar mòduls només quan són necessaris.
  • Divisió de Codi: Dividir el codi en múltiples fitxers per carregar-los de manera dinàmica.
  • Punts d'Entrada Dinàmics: Definir punts d'entrada que es carreguen sota demanda.

Beneficis de la Càrrega Peresosa

  • Millora del Rendiment: Redueix el temps de càrrega inicial de l'aplicació.
  • Optimització de Recursos: Carrega només els recursos necessaris, reduint l'ús de memòria.
  • Millor Experiència d'Usuari: L'aplicació es torna més ràpida i responsiva.

Configuració de la Càrrega Peresosa amb Webpack

  1. Instal·lació de Dependències

Assegura't de tenir Webpack instal·lat al teu projecte. Si no, pots instal·lar-lo amb npm:

npm install --save-dev webpack webpack-cli

  1. Configuració del Fitxer webpack.config.js

Afegeix la configuració bàsica per a la càrrega peresosa:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};

  1. Implementació de la Càrrega Peresosa en el Codi

Utilitza la funció import() per carregar mòduls de manera dinàmica:

// src/index.js
document.getElementById('loadButton').addEventListener('click', () => {
  import('./lazyModule')
    .then(module => {
      const lazyFunction = module.default;
      lazyFunction();
    })
    .catch(err => {
      console.error('Error carregant el mòdul:', err);
    });
});

Crea el mòdul que es carregarà de manera peresosa:

// src/lazyModule.js
export default function lazyFunction() {
  console.log('Mòdul carregat de manera peresosa!');
}

  1. Executar Webpack

Compila el projecte amb Webpack:

npx webpack

  1. Provar la Càrrega Peresosa

Obre el fitxer index.html en un navegador i fes clic al botó per veure com es carrega el mòdul de manera peresosa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Example</title>
</head>
<body>
  <button id="loadButton">Carregar Mòdul</button>
  <script src="dist/bundle.js"></script>
</body>
</html>

Exercici Pràctic

Objectiu

Implementar la càrrega peresosa en una aplicació que tingui múltiples mòduls.

Passos

  1. Crea un nou projecte amb Webpack.
  2. Defineix diversos mòduls que es carregaran de manera peresosa.
  3. Configura Webpack per suportar la càrrega peresosa.
  4. Implementa la càrrega peresosa en el codi.

Solució

  1. Instal·lació de Webpack:
npm init -y
npm install --save-dev webpack webpack-cli
  1. Estructura del projecte:
/project
  /src
    /modules
      moduleA.js
      moduleB.js
    index.js
  index.html
  webpack.config.js
  1. Configuració de Webpack (webpack.config.js):
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};
  1. Implementació de la càrrega peresosa (src/index.js):
document.getElementById('loadModuleA').addEventListener('click', () => {
  import('./modules/moduleA')
    .then(module => {
      module.default();
    })
    .catch(err => {
      console.error('Error carregant el mòdul A:', err);
    });
});

document.getElementById('loadModuleB').addEventListener('click', () => {
  import('./modules/moduleB')
    .then(module => {
      module.default();
    })
    .catch(err => {
      console.error('Error carregant el mòdul B:', err);
    });
});
  1. Mòduls per carregar de manera peresosa (src/modules/moduleA.js i src/modules/moduleB.js):
// src/modules/moduleA.js
export default function() {
  console.log('Mòdul A carregat de manera peresosa!');
}

// src/modules/moduleB.js
export default function() {
  console.log('Mòdul B carregat de manera peresosa!');
}
  1. Fitxer HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Example</title>
</head>
<body>
  <button id="loadModuleA">Carregar Mòdul A</button>
  <button id="loadModuleB">Carregar Mòdul B</button>
  <script src="dist/bundle.js"></script>
</body>
</html>
  1. Compilació del projecte:
npx webpack

Conclusió

La càrrega peresosa és una tècnica poderosa per optimitzar el rendiment de les aplicacions web. Amb Webpack, és fàcil implementar-la utilitzant la funció import(). Aquesta tècnica permet carregar només els mòduls necessaris quan es necessiten, millorant així el temps de càrrega inicial i l'experiència de l'usuari.

En el següent mòdul, explorarem com utilitzar variables d'entorn per configurar diferents entorns de desenvolupament i producció.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats