AssetMapper (Symfony) : La Gestion des Assets sans Node.js
AssetMapper est un composant introduit nativement dans Symfony pour gérer les fichiers statiques (assets) comme le JavaScript, le CSS et les images. Sa philosophie principale est de supprimer totalement le besoin d'installer Node.js, Webpack, Vite ou npm pour la majorité des applications web.
Il s'appuie sur les technologies modernes des navigateurs web (comme les Import Maps et le protocole HTTP/2) pour charger les scripts à la volée.
⚙️ Comment ça marche ? (La magie des Import Maps)
Traditionnellement, les frameworks JS compilent et "bundlent" (rassemblent) des centaines de fichiers JS en un seul gros fichier. AssetMapper adopte une approche radicalement différente :
- Pas de compilation : Vos fichiers CSS et JavaScript restent exactement tels que vous les écrivez. Ils sont simplement copiés et renommés (avec un hash unique pour casser le cache du navigateur) dans un dossier public lors du déploiement.
- Les Import Maps : Au lieu d'assembler le code, AssetMapper génère une carte d'importation HTML (importmap). Le navigateur lit cette carte et sait exactement où télécharger chaque fichier JS ou bundle tiers à la volée lorsqu'un script fait un
import.
- Gestion des dépendances tierces : Envie d'ajouter une librairie (ex: Lodash ou Bootstrap) ? Au lieu d'un
npm install, vous utilisez la commande Symfony : php bin/console importmap:require lodash. Le composant télécharge la librairie et l'ajoute proprement à votre configuration.
📊 Pourquoi est-ce une révolution pour le développeur Symfony ?
- Zéro dépendance Node.js : Plus besoin de gérer un dossier
node_modules de plusieurs gigaoctets, de configurer Webpack Encore ou de faire tourner un serveur de dev JavaScript en parallèle. Tout est géré en pur PHP et Composer.
- Vitesse de développement instantanée : Comme il n'y a aucune étape de compilation ou de "build", les modifications de vos fichiers JS ou CSS sont instantanément visibles à l'écran dès que vous rafraîchissez votre page.
- Performance optimale : Grâce au protocole HTTP/2 (ou HTTP/3) qui permet le téléchargement simultané de nombreux petits fichiers, l'absence de gros fichier "bundle" unique n'est plus un problème de performance, bien au contraire.
- Intégration native avec Symfony UX : Il fonctionne de concert avec Stimulus et Turbo pour vous permettre de construire des applications web interactives, légères et dynamiques à une vitesse folle.
⚠️ Quand faut-il quand même utiliser Webpack ou Vite ?
Bien qu'AssetMapper couvre la très grande majorité des cas d'usage, il montre ses limites si votre projet nécessite :
- L'utilisation de syntaxes spécifiques non interprétées nativement par les navigateurs, comme le TypeScript ou le JSX (React).
- L'utilisation d'un préprocesseur CSS complexe comme Sass ou Less (bien qu'AssetMapper propose des solutions de rechange via des runtimes ou du CSS natif moderne).
- Des optimisations de build ultra-poussées spécifiques aux Single Page Applications (SPA) géantes.