Optimiser le poids des fichiers de Angular

**killianweid** · 22/04/2022, 23h11

Bonjour,
j'ai un site qui est basé sous WordPress avec une intégration d'Angular (version 13). Pour info, pour pouvoir utiliser Angular sur des fichiers php (propre à WordPress) j'ai dû créer des Custom Elements pour chaque Component de mon app Angular.
Le site n'obtient pas un très bon score sur PageSpeed Insights sur mobile (26) alors que sur Desktop le score est de 89. D'après les résultats la principale cause de ce mauvais score serait les fichiers produits par Angular (css et js).
Ces fichiers produits par Angular est le resultat d'un ensemble de tâches effectués lors de la compilation.
Voici la liste des fichiers :
- angular.js qui est une concatenation des fichiers runtime.js, polyfills.js, scripts.js et main.js produit par la commande ng build. Ces fichiers sont concaténés grâce à un script js qui utilise le package "concat"(https://www.npmjs.com/package/concat)
- vendor.js qui est une concatenation de fichiers js issus de bibliotèques tierces (jquery.min.js, jquery-match-height.js, jquery.columnizer.js, jquery.scrollTo.min.js, select2.min.js, stellarnav.min.js) et d'autres fichiers js écrit à la main. Egalement concaténés grâce à un script js qui utilise le package "concat"
- styles.css qui est une concatenation et minification du fichier css produit par ng build et d'autres fichiers css. Utilisation du package "concat" et "csso" (https://www.npmjs.com/package/csso) dans le script js

Voici le poids des fichiers :
angular.js --> 2.3MB
vendor.js --> 83.4 kB
styles.css --> 157 kB

Comment donc baisser le poids du fichier angular.js ? (d'après la console de mon navigateur le fichier est bien gzipé)

Une solution serait peut être d'utiliser le Lazy Load modules, mais puis-je le faire sur une telle application (non utilisation du routing Angular) ?

Merci d'avance pour votre aide !

Cordialement,
Killian