Après la mise à niveau vers Angular 9, le temps de compilation a considérablement augmenté

Question

Lorsque j'ai mis à niveau d'Angular 8 à 9, le temps de compilation a augmenté de plus de 3 fois et en plus, j'utilisais le template de style Scss mais après la mise à niveau, lorsque je générais un composant, il créait un fichier css pour le composant.

J'ai vérifié angular.json et la configuration est "styleext": "scss", y a-t-il une solution pour ces problèmes?

Answer 1

FIX

Désactivez AOT dans le angular.json -> recherchez la première occurrence de aot et changez de true à false

Explication

Dans le cadre de la migration d'Angular 8 > 9, ils ont simplement décidé d'activer la compilation AOT (Ahead Of Time) non seulement pour les constructions --prod, mais aussi pour les constructions régulières (+watch/serve), en arguant que AOT est désormais beaucoup plus rapide avec le nouveau compilateur Ivy. À mon avis, ils n'ont pas réfléchi à cela, car cela a fait passer mes constructions watch/serve de 1 seconde à 30 secondes.

Lecture complémentaire: https://v9.angular.io/guide/ivy

Answer 2

J'ai rencontré le même problème lorsque j'ai migré d'Angular 4 à Angular 9. Ensuite, j'ai désactivé Ivy dans Angular 9. À partir d'Angular 9, Ivy est défini sur true par défaut, ce qui n'était pas le cas dans Angular 8.

Allez dans tsconfig.json et désactivez le mode Ivy.

{
  ...
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false
  }
  ...
}

Note : Il s'agit uniquement d'une solution temporaire. Peut-être que dans la prochaine version, ce problème sera traité.

Answer 3

Je ne vois que des demi-solutions temporaires, donc je vais apporter plus de lumière sur cette question.

J'ai rencontré ces problèmes sur quelques projets et cela est probablement dû à la façon dont votre application est écrite. Dans mon cas, il y avait des problèmes de compilation scss et une mauvaise gestion des NgModules. Malheureusement, vous ne pouvez pas nous montrer l'ensemble de l'application, je suppose.

Je recommande quelques choses :

• Utilisez webpack-bundle-analyzer et corrigez tout ce que vous trouverez grâce à cet outil (il est possible que vous compiliez des choses par erreur ou que vous n'en ayez pas besoin du tout).
• Vérifiez vos styles globaux. Il est important de savoir comment vous importez ces styles, vous devez ÉVITER les duplications de styles importés et les dépendances circulaires. Il est facile de passer à côté du fait que vous importez un fichier scss qui en importe un autre, etc. Je vous recommande d'avoir juste UN fichier avec les imports (l'ordre des imports compte), alors il est facile de déboguer le temps de compilation de ces styles. Et dans les composants, vous n'importerez jamais ce fichier qui importe tout mais seulement les styles/mixins dont vous avez réellement besoin.
• Vérifiez quelles bibliothèques/styles/scripts vous avez ajoutés dans angular.json dans les scripts, styles et stylePreprocessorOptions. Tout ce genre de choses peut ralentir le temps de construction.
• Vous voulez peut-être essayer dart sass plutôt que node sass ? Si c'est le cas, installez fibers, désinstallez node-sass et essayez de compiler.
• Vérifiez vos NgModules. Sont-ils tous correctement importés ? Regardez à nouveau dans le bundle javascript résultant. N'y a-t-il aucune duplication que vous souhaitez éviter dans le bundle résultant ?
• Je recommande de réduire votre application uniquement sur le core AppModule et peut-être les styles... puis ajoutez (ou même supprimez des styles ou d'autres choses) progressivement plus de choses... et compilez. Vous déboguerez le problème de cette manière, trouverez le problème et le résoudrez.

Des choses comme celles-ci se produisent lorsque l'application grandit et que personne n'y prête attention, mais beaucoup de ces choses sont faciles à négliger. Les gens disent alors qu'Angular est mauvais et passent à d'autres bibliothèques/frameworks, mais c'est simplement notre incompréhension du génie et de la complexité d'Angular qui nous limite. Bonne chance ! :-)

Answer 4

Assurez-vous que votre configuration angulaire est similaire à celle ci-dessous

    "@schematics/angular:component": {
      "style": "scss",
      "prefix": "cfs"
    },

Je pense que styleext a été changé en style dans Angular 9

il peut y avoir un problème de configuration, dans Angular, le temps de compilation devrait être considérablement réduit.

vous pouvez consulter cette PR, j'ai migré et tout s'est bien passé https://github.com/aniruddhadas9/candifood-ui/pull/15