Fog of War (Lazy Route DIscovery), la fonctionnalité Remix de la v2.10

00:00 Je viens d'améliorer considérablement les performances d'un site sur lequel je bosse. Regardez cette comparaison de performance à l'écran. On peut voir à gauche qu'on a un score de quatre-vingt en performance light house. Et si on regarde un peu plus dans les détails, on peut voir qu'on a un FCP qui est dans le jaune à un point une seconde et un speed index de deux secondes avec un LCP de deux point cinq secondes. Ce qui n'est pas si mal, mais bien sûr, ça peut être optimisé.

00:29 Et regardez à droite, on a quatre-vingt-quinze pour cent de performance et on a quasiment tout qui est dans le vert. Le LCP est maintenant de zéro point neuf, le speed index reste le même, mais le FCP est passé en dessous des une seconde. Alors comment je réussis à optimiser ce site aussi rapidement en ne rajoutant qu'une ligne de code. Je vais te montrer tout de suite comment j'ai fait. Eh bien j'ai tout simplement mis à jour mon projet remix vers la nouvelle version deux point dix point un ici.

00:57 Et si tu utilises la version deux point dix, ne t'inquiète pas, tu pourras également optimiser ton code. Si on clique sur les changements de la version deux point dix, on peut voir ici qu'il y a une nouvelle fonctionnalité qui s'appelle le Lazy Root Discovery, communément appelé FOGO FWAR. Tu as peut-être déjà entendu le terme FOGO FWAR. Ça vient en fait des jeux vidéo de stratégie comme Warcraft trois. Ici, on a un RTS avec une mini map et nous avons tout un territoire qui est inexploré.

01:23 Et c'est ce qu'on appelle le brouillard de guerre, c'est-à-dire qu'on a le champ de vision du joueur qui est assez limité et le joueur ne voit pas du tout ce qui est en dehors de son champ de vision ou ce qui n'a pas encore été exploré. Ce qui est assez logique au final et Remix a décidé d'implémenter cette fonctionnalité. Alors qu'est-ce que ça veut dire concrètement Si on clique sur documentation ici, on se retrouve sur le guide Fog of War de Remix. Ils nous disent donc que l'API est instable et qu'elle va changer. Il ne faut surtout pas l'utiliser en prod.

01:52 Et il nous donne l'explication derrière cette fonctionnalité. Si tu as une application Remix avec des centaines de pages différentes, elles vont toutes être chargées au premier chargement de la page. Regarde, je vais te faire une démo sur le site d'algo max. Ici, je vais clic droit pour inspecter le code et on va aller dans network et on va rafraîchir la page en désactivant le cache ici et dans network, si on fait un contrôle f sur manifeste, on peut voir qu'on a un fichier en g s qui possède une taille de deux point neuf kilobits. Et si tu cliques dessus, tu peux voir la réponse au format json et nous avons un objet qui va contenir la définition de chacune de nos routes.

02:28 On peut voir ici qu'on a un tableau avec chaque route de cette application au format JISM et nous avons des informations qui peuvent être utiles comme l'ID. Est-ce que cette route définit une action, un loader Est-ce qu'elle contient une erreur bonne raie Et nous avons même les fichiers qu'elle importe comme les composants et les fichiers CSS. Et Remix dans sa gentillesse charge toutes ces informations en amont pour pouvoir optimiser le chargement de l'application à l'avenir. Exemple ici, nous avons une route qui s'appelle Vinylmania et qui nous redirige vers l'url application web slash Vinylmania. Remix sait à l'avance que cette route contient un odeur et qu'il y a des images à charger et des fichiers j s.

03:07 Donc au moment où nous allons charger cette page sur le site, ne serait-ce qu'en mettant la souris dessus, Remix va précharger JS et toutes les images. Comme ça, je n'ai plus qu'à cliquer sur le lien et la page se charge instantanément. C'est magique, en fait on charge la page en amont parce qu'on sait que l'utilisateur va naviguer dessus. C'est génial. Sauf que voilà, quand tu as des centaines et des centaines de pages, ton fichier JSON va commencer à peser.

03:34 Tout simplement parce que Remix va donc regarder pour chacune de ces routes les fichiers g f qui sont importés et il va les importer. Mais alors comment peut-on activer cette fonctionnalité Eh bien c'est très simple. Tu vas ouvrir ton projet remix dans b s code et tu vas lancer une commande dans le terminal pour mettre à jour tes dépendances. Par exemple MCU tiret I tiret tiret format groupe. Ensuite, tu vas cocher les dépendances remix pour les mettre à jour.

04:01 On peut voir qu'actuellement j'utilise la version deux point huit et on a envie de passer à la version deux point dix point un. On va ensuite appuyer sur entrée et nous allons accepter de faire un MPM install et à partir de maintenant, il suffit de se rendre dans le fichier vite en config donc la configuration de vite si tu utilises vite si tu n'utilises pas vite c'est dans la configuration remix et à cet endroit dans la configuration remix on a un onglet future et il te suffit juste d'activer unstable forg of war, c'est un booléen et tu vas le passer à true et c'est tout ce que tu as à faire. Maintenant si tu n'es pas convaincu, je vais te montrer un test que j'ai fait avec page Speed effet. C'est-à-dire que j'ai fait un test sur le site de Good Collect, en environnement de dev avant et après avoir activé la fonctionnalité. On peut voir qu'avant l'activation, on est à quarante-cinq de performance.

04:51 Mais après avoir activé l'activation, on est seulement à quarante-neuf. Donc on a gagné trois quatre points, c'est assez timide, c'est un changement beaucoup moins drastique que le précédent. Si on compare les stats, on peut voir qu'on a quand même une différence non négligeable au niveau du LCP qui est quand même deux à trois secondes de moins depuis nos nouvelles fonctionnalités. Pour le speed index, c'est pareil et pour le FCP, c'est pareil. On gagne environ trois secondes de chargement.

05:16 On peut voir ici au niveau du javascript qu'on est passé de quatre-cent-quatre-vingt-onze kilobites à quatre-cent-soixante-dix-huit. C'est-à-dire qu'on a réussi à retirer treize kilobites de javascript juste en ajoutant cette fonctionnalité. Ce qui n'est pas grand-chose, je vous l'accorde, mais ça dépend de la taille de votre application. Ici, j'ai envie de faire un nouveau test parce que regardez, je suis allé en production sur le site good collecte point c o et j'ai ouvert l'onglet network et ici on peut voir qu'on a téléchargé quarante-trois mégabits de données, ce qui est énorme et l'application a effectué huit cent soixante requêtes sauf que j'ai fait le même test en staging après avoir désactivé la fonctionnalité et au lieu de charger quarante-trois mégabits on peut voir que j'ai téléchargé seulement huit point cinq mégabits de ressources et on est passé de huit cent soixante-une requêtes à cent cents requêtes. Comment expliquer cela Et bien, ce n'est pas juste qu'on gagne treize kilobits de javascript, mais dans le cas de la production, notre application vient télécharger en avance les images qui sont présentes sur les autres pages et potentiellement des composants avec des animations, et caetera.

06:24 Alors qu'avec la nouvelle fonctionnalité Fab of War, Remix ne va pas pré-télécharger toutes ces ressources, c'est-à-dire les images, les animations, le css. Il se chargera donc de le télécharger seulement au moment où l'utilisateur va naviguer sur la nouvelle page et on va faire un essai. Si je clique sur la nouvelle page, qu'est-ce qui va se passer Au fur et à mesure que je navigue sur l'application, Remix va peupler le manifeste, il va le mettre à jour avec la définition de chacune des routes, donc des nouvelles routes qu'il a fini de charger. Comme ça, la première fois que tu navigues sur une page, ça va tout télécharger et la deuxième fois, tu bénéficieras quand même de l'optimisation parce que tu auras en quelque sorte déjà découvert le territoire. Donc, Remix sait à quoi s'attendre quand il s'aventure dans cette zone, il connaît déjà le terrain, les images ne changent pas.

07:14 Bien sûr, cette fonctionnalité vient avec son désavantage. L'avantage, c'est que tu ne télécharges pas toutes les pages, mais du coup, c'est un désavantage parce qu'au moment où tu vas vouloir naviguer sur une nouvelle page, tu vas devoir tout télécharger au lieu d'avoir déjà tout téléchargé en arrière-plan quand tu n'étais pas en train de naviguer dessus. Ici, il nous explique bien que si tu utilises un link avec un préfetch, à l'époque, tu cliquais dessus et ça préchargeait au moment de mettre la souris sur le lien à ce niveau-là. Ensuite, tu cliquais sur le lien et ça te redirigeait sur la nouvelle page. Mais ici, c'est un peu différent.

07:46 Ça va rajouter une étape. Du coup, si tu choisis Fab of War, au moment de cliquer, ça va d'abord devoir découvrir la définition de cette route dans le manifeste. C'est-à-dire, est-ce qu'elle contient des loaders, des actions, du css, des images Et seulement après, ça va précharger la donnée et les modules. Et ensuite, ça va afficher la page. Bien sûr, tu n'es pas obligé d'activer cette fonctionnalité.

08:09 Elle n'est pas activée par défaut et elle est encore instable. Ça veut dire que l'API est peut-être amenée à changer. Par contre, cette fonctionnalité sera activée par défaut dans la nouvelle version majeure de React Router. La version sept qui va remplacer Remix et qui va nous permettre de bénéficier des React Serveurs Component. Alors ça, on est où au final la version dix-neuf de React Les React Serveurs Component Ils en sont où l'équipe de développement de Remix Eh bien pour le savoir, il faudrait regarder leur dernière roadmap qui est un live qu'ils font tous les mois où ils update leur et ils nous expliquent le pourquoi du comment sur certaines de leurs décisions.

08:46 Leur dernière réunion s'est déroulée hier, on a tous les liens dans la description de cette vidéo YouTube et on peut voir la roadmap publique ici pour suivre les avancements du projet. La prochaine fonctionnalité, c'est les routes typées et bien sûr les React Serveurs Onplent. Ce qu'il faut savoir, c'est que la version dix-neuf de React n'est pas encore sortie, ce qui laisse à Remix encore un peu de temps pour travailler sur la migration. Mais je pense qu'on en saura plus dans les prochaines semaines. En tout cas, j'ai vraiment hâte qu'il sorte ces React Server component pour encore une fois changer la stack sur lequel je bosse et potentiellement passer sur du full Remix.

09:19 Alors, dis-moi ce que tu as pensé de cette fonctionnalité Fargo War. Est-ce que ça t'a rappelé des souvenirs de tes games sur Warcraft trois Et est-ce que tu vas utiliser cette nouvelle fonctionnalité ou pas dans ton application Dis-moi ce que tu en penses en commentaire et on se retrouve très bientôt pour la prochaine. À plus.