Un chargement initial plus rapide du frontend?

Développement
1

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 »
2

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: ?

3

Gladys est une PWA (Progressive Web App), c’est une application web qui se rapproche plus d’une application que d’un site web.

Le “bundle JS principal”, en gros, c’est le fichier JavaScript qui contient le code “principal” de l’application et qui est exécuté quand tu la lances.

Ensuite, chaque page de l’interface a son propre bundle JS (= son code).

Jusque-là, le découpage entre le code du bundle principal et celui des bundles de chaque page n’était pas parfait. Cela faisait que ton navigateur perdait du temps à interpréter du code “trop tôt”, à un moment où tu n’en avais pas besoin.

L’inconvénient de cette optimisation, c’est que lorsque tu changes de page, cela peut être un peu moins instantané la première fois que tu charges cette page. En revanche, le chargement initial est plus rapide !

Dans le cas de Gladys, ce découpage a du sens, car la plupart des ouvertures de l’app sur mobile servent à afficher le tableau de bord, contrôler rapidement un appareil, puis fermer Gladys.

1 « J'aime »