Угловые файлы dist огромны, вызывая медленную загрузку

Question

С тех пор, как мое приложение Angular обновилось до версии 5, а затем до версии 6, оно загружалось в браузере очень медленно, иногда занимало более 30 или 40 секунд.Несмотря на то, что я оптимизирую сборку для производства (ng build --prod --build-optimizer --aot), файлы ядра составляют более одного мегабайта.

Основными нарушителями являются

• main.1acde84f0c61a49d6387.js, что составляет 831 КБ,
• styles.99d75733e80daf42e5f9.css, что составляет 269 КБ, и
• 0.06cf948c35f50dabe8dc.js, что составляет 243 КБ.

Являются ли эти файлы обычно такими большими?Любая идея, как я могу обрезать их и улучшить скорость загрузки?

Answer 1

Причина в том, что вы упаковываете все свое приложение в один модуль .

Это означает, что все ваши страницы, компоненты, ... будут объединены в один файл, это, безусловно, будет тяжело.

Решение здесь заключается в том, что вы должны разделить свое приложение на более мелкие пакеты.В Angular он называется module lazy load и реализует preloading (необязательно), чтобы уменьшить bundle size при первой загрузке.

Вы можете следить за следующими статьями:

• https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
• https://angular.io/guide/lazy-loading-ngmodules

Или выполните следующие действия:

• Создайте модуль для своей страницы, он также включает в себя необходимые компоненты.
• Маршрутизация для этого модуля

• Используйте loadChildren для загрузки этого модуля в app router.Примерно так:

  { path: 'a', loadChildren: './anynomous/anynomous.module#AnynomousModule' },