Laravel et Webpack: comment automatiser des optimisations SEO à chaque mise en production

Webpack est un outil en node js qui est intégré de plus en plus dans les développements web coté front. Il permet d’automatiser des process comme la concaténation de fichier css, la minification de code js, l’optimisation d’images… Mais entre webpack et Laravel, certains différences peuvent s’avérer bloquantes, ou difficilement compréhensibles. Voyons ensemble comment ca marche.

Module.export

Un composant que vous retrouvez dans beaucoup de tutoriels sur Webpack est la modification des exports via module.export et parfois même dans le fichier node_modules/laravel-mix/setup/webpack.config.js. Sous Laravel, le seul fichier qui doit être modifié est celui situé à la racine du nom de webpack.config.js, et ce dernier ne permet pas l’ajout de module de cette façon. C’est ce qu’on appelle la Custom Webpack Configuration. Vous devez remplacez la syntaxe:

module.exports = {}
par 
mix.webpackConfig({});

La Mise en cache pour gagner en performances SEO

Lorsque vous mettez en place webpack, c’est principalement pour des raisons de performance. Vous allez donc quasi systématiquement rajouter une configuration de concaténation css, et js. Laravel nous aide déjà beaucoup, car cette simple ligne:

mix.js('public/js/app.js', 'public/js').version();

permet de minifier, compiler les fichiers vues et rendre le code compatible ES2015. A noter que ca fonctionne uniquement en production (npm run production).

Voici un autre exemple qui vous montre comment créer 2 fichiers app.js, et app.css à partir de vos autres ressources:

mix.scripts([
	'public/js/jquery-3.3.1.min.js',
	'public/js/jquery-ui.min.js',
	'public/js/utils.js',
],'public/js/app.js');
   
mix.styles([
    'public/css/font-awesome.min.css',
	'public/css/bootstrap/bootstrap.min.css',
	'public/css/jquery-ui.min.css',
	'public/css/jquery-ui-1.8.17.custom.css',
	'public/css/styles.css',
], 'public/css/app.css');

Le problème, c’est que si vous modifiez vos fichiers et que vous redéployez vos modifications, vos visiteurs ne les verront pas forcément à cause du cache de leur navigateur. Pour régler ce problème, vous avez la méthode du chunkhash en webpack. Ainsi, vous allez vous retrouvez avec un fichier nommé app-0e4d5e.css, et le code 0e4d5e sera différent à chaque changement dans vos fichiers sources. Le navigateur n’ayant pas le cache de ce fichier devra le charger, et vos internautes verront directement vos modifications. Ca vous permet d’avoir un cache qui peut être constant !

Mais là encore, Laravel le fait tout seul. Regardez le fichier public/mix-manifest.json:
« /js/app.js »: « /js/app.js?id=8c39938eadcb2704387b »,

On voit qu’il fait le lien entre le fichier js standard, et la version renvoyée au navigateur et ca c’est grâce à la fonction .version() vu plus haut. Il ne faut pas non plus oublier dans son code HTML d’avoir src= »{{ mix(‘js/app.js’) }} » pour que ca fonctionne correctement.

Tutoriels en vidéo sur Webpack

Tout ca peut vous paraitre un peu obscure, et ca l’est encore un peu pour moi (il y a tellement de plugins); mais voici des excellentes vidéos qui expliquent le fonctionnement de WebPack en long et en large. Merci à son auteur.