Comment utiliser Vite avec Symfony pour gérer ses assets ?

Dans cet article, vous allez découvrir comment utiliser Vite avec Symfony pour gérer vos assets au travers du bundle Symfony & Vite.

Qu'est-ce que Vite ?

Vite est un outil de build rapide pour le développement web. Il est conçu pour les applications modernes basées sur ES modules, telles que Vue.js, React ou Svelte. Vite se concentre sur la rapidité en utilisant la compilation à la volée pour les fichiers ES modules, ce qui permet de réduire le temps de compilation et d'améliorer les performances en développement.

Pourquoi utiliser Vite plutôt que Webpack ?

Si vous connaissez Webpack, vous savez qu'il est puissant, mais qu'il peut être lent à compiler, surtout pour les gros projets. Si vous n'utilisiez pas Webpack alors vous pouvez directement passer au chapitre suivant. 😅

Vite présente plusieurs avantages par rapport à Webpack, notamment un temps de compilation plus rapide et de meilleures performances en développement. 🚀 Vite s'appuie sur le bundler Rollup pour la production et sur esbuild pour le développement. Lorsque vous démarrez Vite en mode développement, il utilise esbuild pour compiler vos fichiers et les servir via un serveur de développement, éliminant ainsi le besoin de recompilation en direct. Un gain de temps qui vous fera presque aimer la compilation ! 😅

Pour une explication plus approfondie des différences techniques entre Vite et Webpack, voici un article détaillé : Vite vs Webpack.

Comment installer Vite avec Symfony ?

Avec Symfony, il existe Webpack Encore, un bundle qui permet d'intégrer Webpack à Symfony. Il offre des fonctions Twig pour inclure les assets dans les templates et une intégration transparente entre Webpack et Symfony.

La question que je me suis posée était : "Existe-t-il un équivalent pour Vite ?". La réponse est oui : le bundle Symfony & Vite développé par Pentatrion permet de relier Vite à Symfony.

Ce bundle propose une intégration aussi fluide que Webpack Encore. Il fournit des fonctions Twig similaires pour inclure les assets dans les templates, génère un fichier manifest.json pour récupérer les noms des fichiers générés par Vite et utilise une configuration standard de Vite. Contrairement à Webpack Encore, qui modifie la configuration Webpack pour la simplifier (ce qui peut entraîner des limitations ou un manque de documentation), ce bundle permet de bénéficier pleinement de la communauté et des ressources disponibles pour Vite.

Comment installer le bundle Symfony & Vite ?

L'installation est très simple :

Exécutez la commande composer require pentatrion/symfony-vite-bundle pour installer le bundle.
Lancez yarn ou npm install pour installer les dépendances de Vite.

Et voilà, le bundle est prêt à l'emploi ! 🎉

Pour plus d'informations sur son utilisation, consultez la documentation officielle : Symfony & Vite - Guide.

Astuce pour la gestion des images

Je gère habituellement toutes mes images statiques via Vite ou Webpack, ce qui permet de les compresser ou de les redimensionner, puis de les inclure facilement dans Twig grâce à la fonction asset.

D'après la documentation, il faut configurer la liaison entre la fonction asset de Twig et le bundle avec cette configuration :

# config/packages/framework.yaml
framework:
    assets:
        version_strategy: 'Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy'

Si vous souhaitez que toutes les images passent par Vite, ajoutez ce code dans un fichier JavaScript de vos assets :

// assets/app.js
import.meta.glob([
  './images/**'
]);

Cependant, j'ai eu du mal à comprendre pourquoi certaines images n'étaient pas traitées. La réponse est dans la documentation, mais elle peut être facilement manquée. On a tous déjà vécu ce moment où l'on cherche frénétiquement une réponse qui était sous nos yeux depuis le début... 😂

Dans la section Troubleshooting, il est expliqué que, par défaut, Vite ne traite pas les images de moins de 4 KB, car elles sont rendues inline. Pour éviter cela, ajoutez cette configuration dans le fichier de configuration Vite :

 build: {
    assetsInlineLimit: 0,
    ...
  },

Conclusion

Vous savez désormais comment intégrer Vite de manière transparente à Symfony, tout comme avec Webpack Encore. Bonne gestion de vos assets et amusez-vous bien ! 😄