[Nice to have] Handle all frontend assets (JS, css, images...) with webpack bundles

[paulRbr]

Webpack est l'outil le plus connu dans le monde du développement web frontend pour « packager » des fichiers ensemble et produire un/des fichiers que l'on peut ensuite charger dans des vues HTML.

L'intérêt d'utiliser Webpack est surtout pour mettre des optimisations sur les fichiers d'assets. Par exemple, minifier les images, minifier les fichiers JS et CSS, diviser les fichiers en plusieurs « chunks » (pour éviter de charger des gros fichiers d'un coup), etc...

Si vous avez du temps je vous conseille de jeter un coup d'oeil à https://github.com/owais/django-webpack-loader pour remplacer tous les usages de la fonctions static dans vos templates HTML afin qu'ils soient géré par des bundles webpack.

[paulRbr]

Salut @alexandrelam !

Y-a-t-il une raison pour laquelle tu as fermée cette issue sans détails ?

Je pense que ça vaudrait le coup d'améliorer la façon dont le frontend est construit :slightly_smiling_face:

[alexandrelam]

Vu qu'on a ni utilisé du js, ni du scss on s'est dit que webpack rajoutait un niveau de complexité qui était inutile. Pour la compression des images media/ on a juste fait ça au moment de l'upload avec Pillow.

[paulRbr]

Merci pour ta réponse @alexandrelam ! Es-tu sûr que vous n'utilisez pas de JS ?

• Vous chargez deux librairies externes (VueJS et fontaweome) dans la mise en page principale des events et ces deux librairies sont d'ailleurs chargés de deux manières différentes :

  • VueJS est récupéré via un CDN
  • fontaweome est empaqueté dans une librairie python/django

• Vous chargez également d'autres librairies externes dans la mise en page du login depuis d'autres CDN :

  • jquery
  • bootstrap

• Puis vous utilisez d'autres librairies spécifiques dans certains templates, comme ici où vous chargez Luxon et vue-datetime encore une fois via une URL de CDN.

• Ensuite vous définissez vos propres codes JS directement dans les templates HTML par ici ou encore par ici.

Cela rend la lisibilité et la compréhension du frontend beaucoup plus difficile, et peut potentiellement créer des problèmes de dépendances (si l'application devait venir à grossir). Bien sûr dans l'état actuel du projet cela reste raisonnable et peut-être que tu as raison, webpack rajouterait un niveau de complexité inutile, mais de mon point de vue et expérience à partir du moment où tu commences à charger plus de 3 librairies JS différentes il faut commencer à réfléchir à l'empaquetage des “assets” frontend.

Laissons l'issue ouverte si jamais on continue à travailler sur le projet ça pourrait devenir utile d'y réfléchir :slightly_smiling_face: