Comment aborder l'optimisation des performances

Le but de cette page est d'offrir plus de conseils sur la façon de gérer le problème de l'optimisation des performances des sites Web de production.

Il semble que vous ayez tenté de diviser les morceaux du bundle sur le site Web de production de React en utilisant React.lazy} et suspense} dans React ; cependant, cela n’a pas entraîné l’amélioration attendue de votre score de performances Web.

Mais pourquoi est-ce le cas ?

Étant donné qu'il fallait quelque chose en plus pour votre site Web de production.....

On m'a récemment confié une mission d'amélioration des performances du site de production. Au départ, je pensais que nous devrions charger chaque itinéraire plus paresseusement, mais je me suis vite rendu compte que cela avait déjà été fait.

J'avais aussi commencé à me demander ce qui pourrait arriver ensuite.

J'ai installé le plugin webpack bundle anlyzer et j'ai ensuite tenté d'analyser chaque élément. Suite à cela, j'ai eu beaucoup de suggestions sur la façon d'améliorer les performances.

Main.bundle.js
la taille du bundle principal était trop grande, ce qui entraîne une augmentation du temps de téléchargement ainsi que du temps d'analyse.

Comment casser le main.bundle.js ?
dans mon cas, mon bundle principal contient beaucoup de json qui est lié à la traduction qui augmentait de 1,5 Mo la taille du bundle principal.

J'ai supprimé la traduction en utilisant l'importation paresseuse du bundle main.js. Cela donne une optimisation du score de performance de 40 %. mais cela n'est pas encore fait puisque nous sommes passés du score de performance du phare de 25 à 35 seulement.

puis j'ai commencé à regarder d'autres gros fichiers potentiels.

L'un d'eux est moment js, qui possède de nombreux paramètres régionaux que nous n'utilisions pas pour notre site Web. Remplacer moment js par une bibliothèque légère est un moyen de résoudre ce problème, mais cela nécessitera davantage de modifications de code et augmentera ma charge de travail pour tester l'ensemble du site Web (ce que je n'avais jamais fait auparavant), ce qui pourrait entraîner davantage d'erreurs. puis j'ai pris la décision de trouver comment me débarrasser de ces régions indésirables ; heureusement, un plugin webpack était déjà disponible. J'ai pu minimiser la taille du fichier moment.js en utilisant ce plugin [ContextReplacementPlugin].

Restez à l'écoute, beaucoup d'autres seront sur le point de venir... Merci

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!