El propósito de esta página es ofrecer más consejos sobre cómo manejar el problema de la optimización del rendimiento para sitios web de producción.

Parece que intentó dividir los fragmentos del paquete en el sitio web de producción de React usando React.lazy} andsuspense} en React; sin embargo, esto no resultó en la mejora esperada en su puntaje de rendimiento web.

Pero ¿por qué es así?

Dado que se necesitaba algo extra para su sitio web de producción.....

Recientemente me asignaron la tarea de mejorar el rendimiento del sitio web de producción. Inicialmente pensé que deberíamos cargar cada ruta de manera más lenta, pero pronto me di cuenta de que esto ya se había hecho.

También había comenzado a preguntarme qué vendría después.

Instalé el complemento analizador del paquete web y luego intenté analizar cada pieza. Después de eso, recibí muchas sugerencias sobre cómo mejorar el rendimiento.

Paquete.js principal
El tamaño del paquete principal era demasiado grande, lo que provoca un aumento en el tiempo de descarga junto con el tiempo de análisis.

¿Cómo romper main.bundle.js?
en mi caso, mi paquete principal tiene muchos json que están relacionados con la traducción, lo que aumentó 1,5 MB del tamaño del paquete principal.

Eliminé la traducción mediante la importación diferida del paquete main.js. Esto proporciona una optimización de la puntuación de rendimiento del 40 %. pero esto aún no se ha hecho ya que alcanzamos la puntuación de rendimiento del faro de 25 a 35 solamente.

luego comencé a buscar otros posibles archivos grandes.

Uno de ellos es moment js, que tiene numerosas configuraciones regionales que no estábamos usando para nuestro sitio web. Reemplazar moment js con una biblioteca liviana es una forma de solucionar este problema, pero hacerlo requerirá más modificaciones de código y aumentará mi carga de trabajo probando todo el sitio web, algo que no había hecho antes, lo que podría generar más errores. luego tomé la decisión de descubrir cómo deshacerme de esas regiones indeseables; Afortunadamente, ya estaba disponible un complemento de paquete web. Pude minimizar el tamaño del archivo moment.js utilizando ese complemento [ContextReplacementPlugin].

Estén atentos, muchos más estarán por venir... Gracias