Un chargement initial plus rapide du frontend?

Salut à tous :blush:

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.

:wrench: Améliorations apportées :

:white_check_mark: Chargement dynamique des librairies lourdes :

  • HLS.js (streaming caméra)
  • Leaflet (Carte du monde)
  • ApexChart (graphiques)

:point_right: Ces librairies ne sont désormais chargées qu’en cas de besoin, allégeant le bundle principal.

:white_check_mark: 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.

:bar_chart: 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 :smiley:

:iphone: Testez et donnez vos retours !

J’ai généré un build Gladys Plus avec ces améliorations :

:link: https://dynamically-import-librairie.gladys-plus.pages.dev

Hâte d’avoir vos impressions ! :blush:

6 « J'aime »

Salut @pierre-gilles, excellente nouvelle si on accélère le temps de chargement, ça va rendre l’UX encore meilleure.
Par contre pour les gros néophytes comme moi en dev, c’est quoi un bundle JS principal :confused: ?