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

Tree Shaking

Següent ►
►

Introducció

Tree Shaking és una tècnica d'optimització que permet eliminar codi mort (unused code) de les aplicacions JavaScript durant el procés de construcció. Aquesta tècnica és especialment útil per reduir la mida dels paquets finals, millorant així el rendiment de les aplicacions.

Conceptes Clau

  • Codi Mort (Unused Code): Codi que no s'utilitza en cap lloc de l'aplicació.
  • ES6 Modules: Tree Shaking funciona millor amb els mòduls ES6 (import i export), ja que aquests permeten una anàlisi estàtica del codi.
  • Side Effects: Operacions dins dels mòduls que poden tenir efectes col·laterals, com modificar variables globals o executar codi en importar el mòdul.

Configuració de Tree Shaking a Webpack

  1. Utilitzar Mòduls ES6

Assegura't que el teu codi utilitzi mòduls ES6. Per exemple:

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add } from './utils';

console.log(add(2, 3));

  1. Configurar Webpack

Per habilitar Tree Shaking a Webpack, assegura't que el mode estigui configurat a production. Això activa automàticament diverses optimitzacions, incloent Tree Shaking.

// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

  1. Marcar Mòduls amb Side Effects

Si tens mòduls que tenen efectes col·laterals, has de marcar-los explícitament per evitar que Webpack els elimini. Això es fa al fitxer package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": [
    "./src/some-module-with-side-effects.js"
  ]
}

Si tots els teus mòduls són lliures d'efectes col·laterals, pots establir sideEffects a false:

{
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": false
}

Exemple Pràctic

Estructura del Projecte

/src
  /utils.js
  /main.js
webpack.config.js
package.json

Contingut dels Fitxers

utils.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

main.js

import { add } from './utils';

console.log(add(2, 3));

webpack.config.js

const path = require('path');

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

package.json

{
  "name": "tree-shaking-example",
  "version": "1.0.0",
  "main": "index.js",
  "sideEffects": false,
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

Construcció del Projecte

Executa la comanda de construcció:

npm run build

Després de la construcció, el fitxer bundle.js només contindrà el codi de la funció add, ja que subtract no s'utilitza enlloc.

Exercicis Pràctics

Exercici 1

Descripció: Crea un projecte Webpack que utilitzi Tree Shaking per eliminar codi mort.

Passos:

  1. Crea un fitxer math.js amb diverses funcions matemàtiques.
  2. Importa només una de les funcions en un fitxer index.js.
  3. Configura Webpack per a la construcció en mode production.
  4. Verifica que el codi mort s'ha eliminat del paquet final.

Solució:

math.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

index.js

import { add } from './math';

console.log(add(2, 3));

webpack.config.js

const path = require('path');

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

package.json

{
  "name": "tree-shaking-exercise",
  "version": "1.0.0",
  "main": "index.js",
  "sideEffects": false,
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

Executa npm run build i verifica que només la funció add està present en el fitxer bundle.js.

Conclusió

Tree Shaking és una tècnica poderosa per optimitzar les aplicacions JavaScript eliminant codi mort. Utilitzant mòduls ES6 i configurant correctament Webpack, pots reduir significativament la mida dels teus paquets finals, millorant així el rendiment de les teves aplicacions.

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