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

Divisió de Codi

Següent ►
►

La divisió de codi (code splitting) és una tècnica essencial en Webpack que permet dividir el codi de la teva aplicació en diversos paquets més petits. Això ajuda a millorar el rendiment de l'aplicació, ja que només es carrega el codi necessari en el moment adequat. En aquesta secció, aprendrem què és la divisió de codi, com configurar-la i veurem exemples pràctics.

Què és la Divisió de Codi?

La divisió de codi és el procés de dividir el codi de la teva aplicació en múltiples fitxers més petits que es poden carregar de manera dinàmica. Això permet que l'aplicació carregui només el codi necessari per a la pàgina o funcionalitat específica que l'usuari està utilitzant, reduint així el temps de càrrega inicial i millorant l'experiència de l'usuari.

Beneficis de la Divisió de Codi

  • Millora del Rendiment: Redueix el temps de càrrega inicial de l'aplicació.
  • Càrrega Dinàmica: Permet carregar codi només quan és necessari.
  • Optimització de Recursos: Redueix la quantitat de codi que es carrega i processa al navegador.

Configuració de la Divisió de Codi

Punts d'Entrada Múltiples

Una manera senzilla de començar amb la divisió de codi és utilitzar múltiples punts d'entrada en la configuració de Webpack.

// webpack.config.js
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

En aquest exemple, hem definit dos punts d'entrada: home i about. Webpack crearà dos paquets separats, home.bundle.js i about.bundle.js.

Divisió de Codi Dinàmica

La divisió de codi dinàmica permet carregar mòduls només quan són necessaris utilitzant la funció import().

// src/index.js
function loadHome() {
  import('./home').then(module => {
    const home = module.default;
    home.init();
  });
}

function loadAbout() {
  import('./about').then(module => {
    const about = module.default;
    about.init();
  });
}

En aquest exemple, els mòduls home i about es carregaran només quan es cridin les funcions loadHome i loadAbout, respectivament.

SplitChunksPlugin

Webpack proporciona el SplitChunksPlugin per a una divisió de codi més avançada i personalitzada.

// webpack.config.js
module.exports = {
  // ... altres configuracions
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Aquesta configuració dividirà automàticament el codi compartit entre diversos punts d'entrada en paquets separats.

Exemples Pràctics

Exemple 1: Punts d'Entrada Múltiples

// src/home.js
console.log('Home Page');

// src/about.js
console.log('About Page');

// webpack.config.js
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

Exemple 2: Divisió de Codi Dinàmica

// src/index.js
document.getElementById('loadHome').addEventListener('click', () => {
  import('./home').then(module => {
    const home = module.default;
    home.init();
  });
});

document.getElementById('loadAbout').addEventListener('click', () => {
  import('./about').then(module => {
    const about = module.default;
    about.init();
  });
});

// src/home.js
export default {
  init() {
    console.log('Home Page Loaded');
  }
};

// src/about.js
export default {
  init() {
    console.log('About Page Loaded');
  }
};

Exercicis Pràctics

Exercici 1: Configuració de Punts d'Entrada Múltiples

  1. Crea dos fitxers JavaScript, home.js i about.js, dins la carpeta src.
  2. Configura Webpack per tenir dos punts d'entrada, home i about.
  3. Compila el projecte i verifica que es generen dos paquets separats, home.bundle.js i about.bundle.js.

Exercici 2: Divisió de Codi Dinàmica

  1. Modifica el fitxer index.js per carregar dinàmicament els mòduls home i about quan es facin clics en els botons corresponents.
  2. Verifica que els mòduls es carreguen només quan es fan clics en els botons.

Solucions

Solució a l'Exercici 1

// src/home.js
console.log('Home Page');

// src/about.js
console.log('About Page');

// webpack.config.js
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

Solució a l'Exercici 2

// src/index.js
document.getElementById('loadHome').addEventListener('click', () => {
  import('./home').then(module => {
    const home = module.default;
    home.init();
  });
});

document.getElementById('loadAbout').addEventListener('click', () => {
  import('./about').then(module => {
    const about = module.default;
    about.init();
  });
});

// src/home.js
export default {
  init() {
    console.log('Home Page Loaded');
  }
};

// src/about.js
export default {
  init() {
    console.log('About Page Loaded');
  }
};

Conclusió

La divisió de codi és una tècnica poderosa per millorar el rendiment de les aplicacions web. Hem vist com configurar punts d'entrada múltiples, utilitzar la divisió de codi dinàmica i aplicar el SplitChunksPlugin per optimitzar la càrrega de codi. Amb aquests coneixements, pots començar a aplicar la divisió de codi en els teus projectes per millorar l'experiència de l'usuari.

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