Salut à tous
Cet après-midi, j’ai travaillé sur l’optimisation du chargement initial du frontend, qui parfois peut-être un peu lent sur mobile quand le réseau est mauvais je trouve.
Améliorations apportées :
Chargement dynamique des librairies lourdes :
- HLS.js (streaming caméra)
- Leaflet (Carte du monde)
- ApexChart (graphiques)
Ces librairies ne sont désormais chargées qu’en cas de besoin, allégeant le bundle principal.
Optimisation du découpage du code :
Certaines routes n’étaient pas correctement séparées, ce qui alourdissait inutilement le chargement en mettant le code de ces routes dans le bundle JS principal.
Résultat :
Le bundle JS principal passe de 2,94 Mo à 694 Ko, réduisant significativement le temps de chargement initial.
Bien-sûr, rien de magique, la taille retiré du bundle principal est rajoutée sur le bundle de chaque route, mais l’idée est qu’on ne charge plus que ce qu’on a besoin.
L’objectif pour moi est d’avoir le chargement du tableau de bord le plus rapide possible, car quand j’arrive sur Gladys sur mon téléphone, c’est souvent juste pour éteindre une lampe, et si le chargement est ralenti juste car le front est entrain de charger des choses inutiles, c’est dommage
Testez et donnez vos retours !
J’ai généré un build Gladys Plus avec ces améliorations :
https://dynamically-import-librairie.gladys-plus.pages.dev
Hâte d’avoir vos impressions !