Webpack: bases et optimisations

Webpack

• C'est un bundler
• V3 vs V4
• Notions: entry, output, loader, plugin
• Approche par configuration
• Synthaxe CommonJS (require) et ESM (import)

const config = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {...},
        },
      },
      ...
    ],
  },
  plugins: [...],
}

La base pour chaque type de ressources

Javascript (et Typescript)

Babel c'est la vie (et pour Typescript aussi !)

Le style

• css-loader
• style-loader (import dans le js, c'est cool)
• fast-sass-loader (mieux que sass-loader)
• post-css (autoprefixer, futur, modules)
• ExtractTextWebpackPlugin (prod)

Les images et les fonts

• file-loader
• url-loader (10ko)
• css ou js selon le besoin
• traitement des svg à part
• responsive-loader (cadeau)

Sourcemap

• eval = inline (dev mais pas prod)
• cheap = à la ligne pas à la colonne
• En dév = eval-source-map ou cheap-module-eval-source-map
• En prod = source-map ou hidden-source-map
• Dans les options du plugin pour le css
• Configurer les devtool path

ICI

Optimiser l'expérience utilisateur du dév

Organiser son code

• Utilisation de fonctions, et d'un module avec des parts
• Webpack-merge (et smart)
• Plus maintenable que des fichiers common/dev/prod

Webpack devserver

Overlay et dashboard

Nodemon et HMR

En vrac

• Banner et git
• NoEmitOnError
• ...

Optimiser les performances du build

La base

• être à jour
• target de compilation
• exclude/include
• externals
• sourcemaps
• bundle splitting pour build incrémental

Cache

• Chaque loader a souvent déjà une gestion du cache
• On peut sauvegarder dans des fichiers (Hard source webpack)

Pour aller très loin

• Parallèle
• DllPlugins

Optimiser les performances de l'application finale

Réduire les polyfills

• .browerslist
• babel useBuiltIns

Tree shaking

• import *
• utiliser des packages bien écrits

Eliminer le code mort (JS et CSS)

• DefinePlugin
• Généralement sur nodeEnv (auto en V4)
• Pour le css plein de plugins plus ou moins puissants

Scope hoisting

• Minimise les closures
• Auto en V4

Se méfier des dépendances dynamiques (coucou moment)

• IgnorePlugin

Minification (JS et CSS)

• Ugligy pour le js (pas besoin en v4)
• options minimize dans le loader css
• En vrai relou, donc on minimize pour tout le monde (v4 auto)

Réduire la taille des images

• image-webpack-loader (imagemin)
• plugin pour sprites

Décliner par local ou par target 

• Plugin officiel pas ouf pour les locales, mais webpack-multilang-i18n-plugin cool
• Pour Angular, à la mano
• .browserslistrc différents pour legacy et modern
• Polyfill.io

GZIP

• Un ptit plugin et c'est fini
• Zopfli c'est mieux
• On ne le fait que si ça vaut le coup (20%)

Long term caching

• On nomme les fichiers en fonction de leur contenu
• plugin Manifest pour gérer les trucs externes
• En interne, les plugins font ce qu'il faut (HtmlPlugin)

Bundle splitting + code splitting

• On isole les vendors
• On isole la runtime webpack (important)
• CommonChunkPlugin
• Découpe fonctionnelle
• Avec la v4: tout marche tout seul \o/
• Outils d'analyse dispo pour itérer et trouver la meilleure config (ici)