React est une bibliothèque front-end JavaScript efficace et, est devenue l’une des bibliothèques JavaScript les plus populaires. React vous aide à gérer les applications plus facilement et à les rendre plus évolutives et robustes. React est sollicité par la plupart des entreprises et, les développeurs et experts de React sont très demandés. Si vous n’avez pas encore commencé à travailler avec React, il serait intéressant de suivre une formation React Js. À cette fin, vous pouvez vous inscrire à un cours React Js en ligne.
React effectue lui-même un intelligent travail en termes de performances des applications. Mais, lorsque vous utilisez des applications complexes, vous pouvez rencontrer des problèmes avec certains composants. Les huit conseils suivants vous aideront à améliorer les performances de vos applications.
1- Mesurer les temps de rendu
Avant de commencer l’optimisation, mesurez le temps nécessaire au rendu des composants clés de vos applications. Vous ne pouvez pas commencer à vous améliorer sans disposer d’une base de référence. L’outil recommandé à cet effet consiste à utiliser l’API de synchronisation du navigateur (the browser’s User Timing API).
2 – Utiliser la construction de production
La version de production de React améliore les performances de vos applications de deux manières. La première est que la taille de fichier de la version de production est considérablement réduite, ce qui signifie que la page se charge plus rapidement car le navigateur doit télécharger, analyser et exécuter moins d’éléments. Deuxièmement, il y a beaucoup moins de code dans la production de React car des informations telles que les informations de profilage et les avertissements ont été supprimées. En mode de production, il a été démontré que les temps de montage et de mise à jour sont toujours plus bas.
3 – Function/Stateless Components et React.PureComponent
Les Function Components et PureComponent sont deux méthodes d’optimisation des applications React au niveau des composants. Les Function Components réduisent la taille du bundle car ils minimisent mieux que les classes et empêchent la construction d’instances de classe. PureComponent, d’autre part, est utile pour optimiser les mises à jour de l’UI.
4 – Multiple fichiers Chunk
Toutes les applications démarrent facilement avec seulement quelques composants. Une fois que vous avez commencé à ajouter des dépendances et des fonctionnalités, il est facile de vous retrouver avec un fichier de production volumineux sans vous en rendre compte. Vous pouvez résoudre ce problème en tirant parti de CommonsChunkPlugin pour webpack, qui vous aide à séparer le code de votre fournisseur ou celui d’une bibliothèque tierce de votre propre code d’application. En gros, vous diviserez le fichier en deux ensembles, à savoir vendor.bundle.js et app.bundle.js. Un autre avantage est que votre navigateur n’a pas besoin de mettre en cache aussi souvent et de télécharger en parallèle les ressources requises, ce qui réduit les temps de chargement.
5 – Optimisation de la dépendance
Lorsque vous commencez à optimiser la taille de votre bundle, vérifiez la quantité de code que vous utilisez réellement pour vos dépendances. Par exemple, si vous n’utilisez que quelques-unes des 100 méthodes ou plus de lodash, vous pouvez utiliser le plug-in lodash-webpack pour supprimer les fonctions inutilisées et réduire la taille de l’ensemble.
6 – Évitez la définition d’inline fonction dans la fonction de rendu
Les fonctions en ligne échoueront avec le diff prop chaque fois que React effectuera une vérification des différences car, en JavaScript, les fonctions sont des objets. L’utilisation d’une array fonction créera une nouvelle instance de la fonction à chaque rendu. Il est préférable de définir l’array fonction plutôt que de définir la fonction inline pour les props.
Lire la suite (en anglais) > https://www.dailyexcelsior.com/8-tips-to-improve-the-performance-of-react-apps/
