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

Caché

Següent ►
►

En aquest tema, explorarem com gestionar la memòria cau (caché) en Webpack per millorar el rendiment de les aplicacions web. La memòria cau és una tècnica que permet emmagatzemar dades temporalment per accelerar l'accés futur a aquestes dades. En el context de Webpack, la memòria cau ajuda a evitar la recàrrega innecessària de fitxers que no han canviat, millorant així el temps de càrrega de les aplicacions.

Objectius

  • Entendre la importància de la memòria cau en el desenvolupament web.
  • Aprendre a configurar la memòria cau en Webpack.
  • Implementar tècniques de memòria cau per a fitxers JavaScript, CSS i altres recursos.

Conceptes Clau

  1. Importància de la Memòria Cau

  • Rendiment: Redueix el temps de càrrega de les pàgines web.
  • Eficiència: Minimitza les sol·licituds al servidor.
  • Experiència d'Usuari: Millora la percepció de velocitat de l'aplicació.

  1. Hashing de Fitxers

El hashing de fitxers és una tècnica que afegeix un hash únic als noms dels fitxers generats per Webpack. Això permet que els navegadors puguin identificar fàcilment si un fitxer ha canviat i, per tant, si cal descarregar-lo de nou.

  1. Tipus de Hashing

  • Hash de Contingut ([contenthash]): Basat en el contingut del fitxer. Canvia només si el contingut del fitxer canvia.
  • Hash de Mòdul ([chunkhash]): Basat en el contingut del mòdul. Canvia només si el contingut del mòdul canvia.
  • Hash de Compilació ([hash]): Basat en la compilació completa. Canvia cada vegada que es fa una nova compilació.

Configuració de la Memòria Cau en Webpack

  1. Configuració Bàsica

A continuació, es mostra un exemple de configuració bàsica de Webpack per utilitzar el hashing de fitxers:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Neteja la carpeta de sortida abans de cada compilació
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  optimization: {
    moduleIds: 'deterministic', // Assegura que els IDs de mòdul siguin estables
    runtimeChunk: 'single', // Crea un chunk separat per al runtime
    splitChunks: {
      chunks: 'all', // Divideix els chunks per a tots els mòduls
    },
  },
};

  1. Explicació del Codi

  • filename: '[name].[contenthash].js': Utilitza el hash de contingut per als noms dels fitxers de sortida.
  • clean: true: Neteja la carpeta de sortida abans de cada compilació per evitar fitxers obsolets.
  • moduleIds: 'deterministic': Garanteix que els IDs de mòdul siguin estables entre compilacions.
  • runtimeChunk: 'single': Crea un chunk separat per al runtime, millorant la memòria cau.
  • splitChunks: { chunks: 'all' }: Divideix els chunks per a tots els mòduls, millorant la memòria cau i el rendiment.

  1. Plugins per a la Memòria Cau

  • HtmlWebpackPlugin: Genera un fitxer HTML que inclou automàticament els fitxers de sortida amb hash.
  • WebpackManifestPlugin: Crea un manifest JSON que mapeja els noms dels fitxers originals als noms amb hash.

Exemple d'ús de HtmlWebpackPlugin:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... altres configuracions
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

Exercicis Pràctics

Exercici 1: Configuració de Hashing de Fitxers

  1. Configura un projecte Webpack per utilitzar el hashing de fitxers amb [contenthash].
  2. Afegeix un fitxer CSS i assegura't que també utilitzi el hashing de fitxers.

Solució:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
    },
  },
};

Exercici 2: Implementació de WebpackManifestPlugin

  1. Afegeix el WebpackManifestPlugin al projecte per generar un manifest JSON.
  2. Verifica que el manifest JSON es generi correctament i mapeja els noms dels fitxers originals als noms amb hash.

Solució:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new WebpackManifestPlugin(),
  ],
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
    },
  },
};

Resum

En aquest tema, hem après la importància de la memòria cau en el desenvolupament web i com configurar-la en Webpack utilitzant tècniques de hashing de fitxers. També hem vist com utilitzar plugins com HtmlWebpackPlugin i WebpackManifestPlugin per millorar la gestió de la memòria cau. Aquestes tècniques són essencials per optimitzar el rendiment de les aplicacions web i proporcionar una millor experiència d'usuari.

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