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

Minificació

Següent ►
►

La minificació és un procés crucial en l'optimització de les aplicacions web per a producció. Consisteix en la reducció de la mida dels fitxers de codi (JavaScript, CSS, HTML) eliminant espais en blanc, comentaris i altres caràcters innecessaris sense afectar la funcionalitat del codi. Això ajuda a millorar el temps de càrrega de la pàgina i la seva eficiència.

Objectius d'aquest tema

  • Entendre què és la minificació i per què és important.
  • Aprendre a configurar Webpack per minificar el codi.
  • Veure exemples pràctics de minificació de JavaScript i CSS.
  • Realitzar exercicis pràctics per consolidar els coneixements.

Què és la Minificació?

La minificació és el procés de reduir la mida dels fitxers de codi font eliminant caràcters innecessaris com espais en blanc, salts de línia, comentaris i altres elements que no són essencials per a l'execució del codi. Això resulta en fitxers més petits que es carreguen més ràpidament en el navegador.

Beneficis de la Minificació

  • Reducció del temps de càrrega: Fitxers més petits es descarreguen més ràpidament.
  • Millora del rendiment: Menys dades per transferir milloren la velocitat de la pàgina.
  • Menys ús d'ample de banda: Redueix el consum de dades, beneficiós tant per als usuaris com per als servidors.

Configuració de Webpack per a la Minificació

Webpack ofereix diverses eines per minificar el codi. En aquest apartat, veurem com configurar Webpack per minificar JavaScript i CSS.

Minificació de JavaScript

Per minificar JavaScript, Webpack utilitza el plugin TerserPlugin, que és el minificador per defecte en mode de producció.

Exemple de Configuració

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  // Altres configuracions...
};

Minificació de CSS

Per minificar CSS, podem utilitzar el plugin css-minimizer-webpack-plugin.

Exemple de Configuració

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      '...', // Manté altres minificadors com TerserPlugin
      new CssMinimizerPlugin(),
    ],
  },
  // Altres configuracions...
};

Exemples Pràctics

Minificació de JavaScript

  1. Crea un fitxer JavaScript amb contingut no minificat:
// src/index.js
function helloWorld() {
  console.log("Hello, World!");
}

helloWorld();
  1. Configura Webpack per minificar el JavaScript:
// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};
  1. Executa Webpack:
npx webpack --config webpack.config.js
  1. Revisa el fitxer minificat a dist/bundle.js.

Minificació de CSS

  1. Crea un fitxer CSS amb contingut no minificat:
/* src/styles.css */
body {
  background-color: white;
  color: black;
}
  1. Configura Webpack per minificar el CSS:
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimize: true,
    minimizer: [
      '...', // Manté altres minificadors com TerserPlugin
      new CssMinimizerPlugin(),
    ],
  },
};
  1. Executa Webpack:
npx webpack --config webpack.config.js
  1. Revisa el fitxer minificat a dist/main.css.

Exercicis Pràctics

Exercici 1: Minificació de JavaScript

  1. Crea un fitxer src/app.js amb el següent contingut:
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Webpack");
  1. Configura Webpack per minificar aquest fitxer i genera un fitxer de sortida minificat.

Exercici 2: Minificació de CSS

  1. Crea un fitxer src/styles.css amb el següent contingut:
/* src/styles.css */
h1 {
  font-size: 2em;
  color: blue;
}
  1. Configura Webpack per minificar aquest fitxer i genera un fitxer de sortida minificat.

Solucions

Solució a l'Exercici 1

// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Solució a l'Exercici 2

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimize: true,
    minimizer: [
      '...', // Manté altres minificadors com TerserPlugin
      new CssMinimizerPlugin(),
    ],
  },
};

Conclusió

La minificació és una tècnica essencial per optimitzar les aplicacions web per a producció. Amb Webpack, podem configurar fàcilment la minificació de JavaScript i CSS per reduir la mida dels fitxers i millorar el rendiment de la nostra aplicació. Practicar amb exemples reals ens ajuda a comprendre millor com aplicar aquestes tècniques en els nostres projectes.

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