Angular2 медленная начальная загрузка страницы, вызванная последовательностью загрузки

У меня есть проект angular2, созданный из seed, и я добавил несколько угловых компонентов на моей начальной странице. Некоторые из них загружают изображения - что относительно медленно, но проблема заключается в следующем:

  1. У меня есть большой пакет (~ 1 МБ), и я сейчас работаю над ним, чтобы сделать его меньше, следуя руководству по этому вопросу.
  2. Первоначальная загрузка выполняет всего несколько запросов, загружает пакет (обычно ~ 3 секунды) и ожидает загрузки приложения Angular (~ 1,4 секунды). После этого он начинает загружать все компоненты и загружать их ресурсы (шрифты, изображения и т.д.). Вот как выглядит запрос:

enter image description here

Я боюсь, что даже после того, как я уменьшу размер пакета, приложение все равно будет загружаться в течение 1,5 секунд без каких-либо запросов, а затем снова ждать ~ 1 секунду для загрузки ресурсов компонентов. Я предполагаю, что это приведет к примерно 3+ секундам времени загрузки. С моим приложением, относительно простым, я нашел это неприемлемым.

Q1: есть ли способ загрузить ресурсы компонента раньше и просто ссылаться на них при загрузке компонента?

Q2: есть ли способ ускорить загрузку приложения?

Я открыт для других предложений тоже :)

Редактировать:

Я использую AoT-компиляцию, поставляемую с семенами, и я предпринял шаги, чтобы уменьшить размер файла app.js Проблема по-прежнему заключается в разрыве между концом app.js файла app.js и вызовами ресурсов первого компонента. enter image description here

ОБНОВЛЕНИЕ (2016-12-19):

То, что я сделал (на данный момент) только на сервере:

  • Включена поддержка HTTP2, что привело к значительному улучшению скорости.
  • Включен GZIP, который уменьшил размер JS более чем в 5 раз.

Эти конфигурации серверов были тривиальными на NGINX и Apache, поэтому стоит попробовать.

Теперь, хотя сайт загружается намного быстрее, эти изменения не решают начальные проблемы (Проблема 1 и Проблема 2). Поэтому я смотрю на некоторые другие подходы, которые вы также можете использовать, если вы находитесь на моем месте:

ОБНОВЛЕНИЕ (2018-06-11):

Вот некоторые материалы, которые помогли мне увеличить начальную нагрузку:

В моем случае Lazy Loading играет большую роль.

Ответ 1

Q2: вы можете быстрее запустить загрузку приложения и уменьшить размер пакета, выполнив компиляцию Ahead of Time: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Так же, как это звучит, шаблоны предварительно скомпилированы и все скрипты, созданные заранее, что сокращает время обработки после начальной загрузки. Кроме того, компилятор Angular 2 не входит в ваш комплект, который должен сократить размер самого пакета на большую сумму.

Q1: существует ленивая поддержка загрузки компонентов, но я не смотрел на то, что она влечет за собой, кто-то другой может ответить на эту часть для вас.

Ответ 2

также учитывая минимизацию/связывание js, включение сжатия gzip на стороне сервера уменьшит время загрузки.

Ответ 3

Купив CloudFlare DNS, мы смогли сократить время загрузки с 50 секунд до 4 секунд. Также можно уменьшить скорость обновления до 1 секунды.

Для него есть бесплатная версия, она отлично работает.