Optimisez votre frontend - Minifier vos assets avec Docker, Bash et YAML

Dans le développement web moderne, garder vos fichiers CSS et JavaScript légers est crucial pour la performance. Les bundlers lourds comme Webpack ou Vite sont excellents pour les applications complexes, mais parfois vous voulez juste une manière simple et portable de concaténer et minifier des fichiers, sans installer tout l'écosystème Node.js sur votre machine locale ou sur votre runner CI/CD.

Aujourd'hui, nous allons construire un pipeline de build maison avec :

1. YAML pour définir nos bundles d'assets.
2. Bash pour orchestrer la concaténation des fichiers.
3. Docker pour effectuer la minification avec des outils très performants.

Le lancer​

Une fois le manifeste et le script en place (voir plus bas), tout le pipeline tient en une seule commande :

Et oui, ça n'a pris que cinq secondes (téléchargement de l'image Docker compris).

Pourquoi cette approche ?​

1. Aucune dépendance Node : pas besoin de package.json ni de dossier node_modules. Le moteur de minification vit dans un container Docker.
2. Ultra-rapide : tdewolff/minify est écrit en Go. Il est nettement plus rapide que beaucoup de minifieurs écrits en JavaScript.
3. Déclaratif : ajouter un nouveau fichier à votre bundle CSS se résume à ajouter une ligne dans votre manifest.yaml.
4. Cohérence : puisque nous utilisons Docker, le résultat de la minification sera exactement le même sur votre machine locale, sur le portable de votre collègue et sur votre serveur CI de production.

L'architecture​

Notre workflow est vraiment (vraiment !) simple :

1. Un script Bash lit un fichier manifest.yaml.
2. Il rassemble les fichiers sources et les fusionne dans un seul fichier temporaire.
3. Il lance un container Docker qui exécute le moteur minify pour compresser le code.

1. La configuration (manifest.yaml)​

D'abord, il nous faut un moyen d'indiquer à notre script quels fichiers vont ensemble. Cette structure YAML vous permet de définir plusieurs bundles, aussi bien pour le CSS que pour le JS.

Voici ce dont nous avons besoin :

bundles:?
  - name: "Main Styles"?
    type: "css"?
    output: "dist/assets/app.min.css"?
    inputs:?
      - "public/assets/css/components.css"
      - "public/assets/css/layout.css"
      - "public/assets/css/reset.css"
      - "public/assets/css/variables.css"
  - name: "App Logic"
    type: "js"
    output: "dist/assets/bundle.min.js"
    inputs:
      - "public/assets/js/api.js"
      - "public/assets/js/main.js"
      - "public/assets/js/utils.js"

Nous avons deux parties, une pour le CSS et une pour le JS, et nous allons définir deux choses

1. Le nom de notre fichier cible (par ex. ici, le fichier CSS minifié sera dist/assets/app.min.css)
2. Une liste de fichiers d'entrée

2. Le script orchestrateur (build.sh)​

Ce script Bash utilise yq (un processeur YAML léger ; voyez-le comme le cousin YAML de jq) pour parser notre manifeste. Il concatène les fichiers puis appelle l'image Docker [tdewolff/minify](https://hub.docker.com/r/tdewolff/minify) pour faire le gros du travail. Résultat : nous ne polluons pas notre système avec des dépendances supplémentaires — juste une petite image Docker.

3. Comment l'exécuter​

Prérequis​

1. Docker : installé et démarré.
2. yq : un processeur YAML portable en ligne de commande. Vous pouvez l'installer avec sudo apt-get update && sudo apt-get install yq si vous ne l'avez pas encore.

Mise en place​

Pour ce tutoriel, créons quelques fichiers d'exemple. Ouvrez un nouveau terminal et lancez cette longue commande :

Cette instruction va créer un nouveau dossier /tmp/minification et automatiser la création de quelques fichiers :

Créons maintenant le manifeste et le script​

Cela fait, terminez la mise en place en créant le fichier manifeste /tmp/minification/manifest.yaml :

Et créez aussi le script Bash /tmp/minification/build.sh :

Dernière chose : le rendre exécutable (chmod +x /tmp/minification/build.sh).

Exécution​

Vous êtes prêt. Lancez simplement ./build.sh pour démarrer la concaténation et la minification — c'est exactement la commande derrière la capture d'écran au début de cet article.

Jetez un œil aux options de l'image Docker​

Rendez-vous sur tdewolff/minify et regardez le site de démo, les options CLI et la documentation.

Conclusion​

En combinant la puissance du scripting Bash avec l'isolation de Docker, nous avons créé un pipeline d'assets robuste. Ce setup est parfait pour les sites statiques, les projets PHP legacy, ou tout environnement où vous voulez garder votre outillage de développement le plus léger possible.

Des assets minifiés ne représentent toutefois que la moitié du chemin côté performance : les images sont généralement la partie la plus lourde d'une page. Voyez Quelques vérifications sur les images de votre site Docusaurus pour l'audit automatisé que je fais tourner sur les miennes.