Formation Comprendre Webpack : Mise en cache

Afin d'améliorer les performances côté navigateur il est important de configurer correctement la mise en cache des assets JavaScript et CSS. En général, on indique aux navigateurs de mettre en cache les fichiers pour une très longue durée et on change le nom du fichier à chaque mise à jour afin de forcer le rafraichissement de ce dernier.

Il va être possible d'indiquer à Webpack d'ajouter un hash dans le nom du fichier à chaque compilation

  output: {
    path: path.resolve('./public/assets'),
    filename: dev ? '[name].js' : '[name].[chunkhash:8].js',
    publicPath: (dev ? 'http://localhost:8080' : '') + '/assets/'
  },

Ceci permet de créer un nouveau nom de fichier, mais cela pose 2 problèmes. Le premier problème concerne le dossier de sortie qui va se retrouver rempli par de nombreux fichiers à chaque modification. Il faut donc le vider lors de la compilation, on peut le faire de différentes manières, mais on peut par exemple utiliser un plugin.

const CleanWebpackPlugin = require('clean-webpack-plugin')

//...

config.plugins.push(new CleanWebpackPlugin(['assets'], {
  root: path.resolve('./public/'),
  verbose: true,
  dry: false
}))

L'autre problème concerne le chemin des fichiers. Maintenant que l'on a des fichiers nommés app.12aze123.css comment peut-on retrouver ce nom et l'utiliser dans notre application (PHP, Rails ou autre...). Il est possible de générer un fichier JSON contenant le nom des fichiers via un plugin.

const ManifestPlugin = require('webpack-manifest-plugin')

// ...

config.plugins.push(new ManifestPlugin())

Ce plugin va générer un fichier manifest.json dans votre dossier output.path que l'on pourra parser pour retrouver le chemin du fichier que l'on souhaite charger.

{
  "app.css": "app.12839612.css",
  "app.js": "app.25233dd4.js",
  "knot.jpg": "knot.cf3e48c.jpg"
}