После обновления до Angular 9 время компиляции значительно увеличилось

Question

Когда я обновил с Angular 8 до 9, время компиляции увеличилось более чем в 3 раза, а также я использовал шаблон стиля S css, но после обновления, когда я генерирую компонент, он создает css файл для компонента.

Я проверил angular. json и конфиг "styleext": "s css" есть ли решение для этих проблем?

Answer 1

Убедитесь, что ваша angular конфигурация аналогична приведенной ниже

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

Я думаю, styleext изменено на style в angular 9

, возможно, есть какая-то конфигурация проблема, в angular, время компилятора должно быть значительно сокращено.

Вы можете посмотреть на этот PR, я мигрировал, и он хорошо работает https://github.com/aniruddhadas9/candifood-ui/pull/15

Answer 2

Я вижу только временные полу-решения, поэтому я собираюсь рассказать об этом подробнее.

Я встречался с этими проблемами в нескольких проектах, и это, вероятно, связано с тем, как написано ваше приложение. В моем случае были проблемы с компиляцией s css и неправильным управлением NgModules. К сожалению, вы не можете показать нам все приложение, я думаю.

Я рекомендую несколько вещей:

• Используйте webpack-bundle-analyzer и исправьте все, что вы найдете благодаря этому инструменту (это возможно, вы случайно скомпилируете вещи, которые у вас есть, или которые вам вообще не нужны).
• Проверьте свои глобальные стили. Важно, как вы импортируете эти стили, чтобы избежать дублирования импортированных стилей и циклических зависимостей. Легко не заметить, что вы импортируете файл s css, который импортирует другой файл s css и так далее. Я рекомендую иметь только ОДИН файл с импортом (порядок импорта имеет значение), тогда легко отладить время компиляции этих стилей. И в компонентах вы никогда не импортируете этот файл, который импортирует все, кроме тех стилей / миксов, которые вам действительно нужны.
• Проверьте, какие библиотеки / стили / сценарии вы добавили в angular. json в сценариях, стилях и stylePreprocessorOptions. Все это может замедлить время сборки.
• Может быть, вы хотите попробовать dart sass поверх узла sass? Если это так, установите fibbers, удалите node-sass и попробуйте собрать.
• Проверьте ваши NgModules. Все ли они импортированы правильно? Снова посмотрите на результат javascript bundle. Есть ли какие-либо дубликаты, которых вы хотите избежать в пакете результатов?
• Я рекомендую сокращать ваше приложение только в основном AppModule и, возможно, стилях ... затем постепенно добавлять (или даже удалять стили или другие вещи) больше вещей ... и строить. Вы устраните проблему таким образом, найдете проблему и решите ее.

Подобные вещи случаются, когда приложение растет, и никто не обращает на это внимания, но многие из этих вещей легко пропустить. Затем люди говорят, что Angular - это плохо, и переходят в другие библиотеки / фреймворки, но это только наше неправильное понимание гениальности и сложности Angular, которые ограничивают нас. Удачи! : -)

Answer 3

У меня возникла та же проблема при переносе Angular 4 на Angular 9. Затем я отключил Ivy в Angular 9. С Angular 9, Ivy по умолчанию установлено на true который не был в Angular 8.

Go до tsconfig.json и отключен режим Ivy.

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

Примечание: Это только временное решение. Возможно, в следующей версии эта проблема будет решена.