У меня есть проект angular2, созданный из seed, и я добавил несколько угловых компонентов на моей начальной странице. Некоторые из них загружают изображения - что относительно медленно, но проблема заключается в следующем:
- У меня есть большой пакет (~ 1 МБ), и я сейчас работаю над ним, чтобы сделать его меньше, следуя руководству по этому вопросу.
- Первоначальная загрузка выполняет всего несколько запросов, загружает пакет (обычно ~ 3 секунды) и ожидает загрузки приложения Angular (~ 1,4 секунды). После этого он начинает загружать все компоненты и загружать их ресурсы (шрифты, изображения и т.д.). Вот как выглядит запрос:
Я боюсь, что даже после того, как я уменьшу размер пакета, приложение все равно будет загружаться в течение 1,5 секунд без каких-либо запросов, а затем снова ждать ~ 1 секунду для загрузки ресурсов компонентов. Я предполагаю, что это приведет к примерно 3+ секундам времени загрузки. С моим приложением, относительно простым, я нашел это неприемлемым.
Q1: есть ли способ загрузить ресурсы компонента раньше и просто ссылаться на них при загрузке компонента?
Q2: есть ли способ ускорить загрузку приложения?
Я открыт для других предложений тоже :)
Редактировать:
Я использую AoT-компиляцию, поставляемую с семенами, и я предпринял шаги, чтобы уменьшить размер файла app.js
Проблема по-прежнему заключается в разрыве между концом app.js
файла app.js
и вызовами ресурсов первого компонента.
ОБНОВЛЕНИЕ (2016-12-19):
То, что я сделал (на данный момент) только на сервере:
- Включена поддержка HTTP2, что привело к значительному улучшению скорости.
- Включен GZIP, который уменьшил размер JS более чем в 5 раз.
Эти конфигурации серверов были тривиальными на NGINX и Apache, поэтому стоит попробовать.
Теперь, хотя сайт загружается намного быстрее, эти изменения не решают начальные проблемы (Проблема 1 и Проблема 2). Поэтому я смотрю на некоторые другие подходы, которые вы также можете использовать, если вы находитесь на моем месте:
- Предварительный рендеринг с Gulp
- Предварительный рендеринг в Amazon
- Компиляция AoT против JIT - некоторые идеи.
ОБНОВЛЕНИЕ (2018-06-11):
Вот некоторые материалы, которые помогли мне увеличить начальную нагрузку:
- Семинар Angular Performance - Манфред Штайер
- Angular - более высокая производительность и лучший пользовательский опыт с отложенной загрузкой - Ashwin Sureshkumar
В моем случае Lazy Loading играет большую роль.