Performance & Optimization

Webpack Basics

Webpack configuration and basic optimization.

Basic Config

webpack.config.js
const path = require(path);

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

Production Mode

Enable production optimizations
mode: production

Automatically enables:
• Minification (TerserPlugin)
• Tree shaking
• Scope hoisting
• Module concatenation

Code Splitting

Multiple entry points
entry: {
  app: ./src/app.js,
  vendor: ./src/vendor.js
}

Dynamic imports
import(./module.js)
  .then(module => {
    module.default();
  });

Split chunks
optimization: {
  splitChunks: {
    chunks: all
  }
}

Output Hashing

Content hash for cache busting
output: {
  filename: [name].[contenthash].js,
  chunkFilename: [name].[contenthash].js
}

Hash types
[hash] // build hash
[chunkhash] // chunk hash
[contenthash] // content hash (best)