Любой испытывает медленную загрузку с angular2

У меня есть приложение angular two с typescript и systemjs.

Мои приложения весят всего 800 КБ, и для создания страницы только с текстом требуется 4 секунды.

Все мои js и css маленькие / минифицированные, и у меня всего 11 запросов, почти без изображений.

Все изображения сжаты и находятся в cdn firebase.

Я размещаю с firebase и использую cloudflare для ssl и производительности.

Кто-нибудь сталкивался с плохой производительностью angular2 при загрузке и кэшировании.

Я не получаю никаких улучшений кэширования в скорости.

Ниже показан снимок экрана с файлами и временем загрузки:

введите здесь описание изображения

Это результаты теста скорости: https://www.webpagetest.org/result/161205_0H_S4H/

Запросов при загрузке: 17 (см. ниже скриншот вкладки сети при загрузке)

введите здесь описание изображения


angular cloudflare systemjs angular2-http angular2-router
person AngularM    schedule 05.12.2016    source источник
comment
Сколько времени занимает каждый запрос при загрузке файлов?   -  person byxor    schedule 05.12.2016
comment
что показывает вкладка вашей сети в инструментах разработчика?   -  person shusson    schedule 05.12.2016
comment
Запросов очень мало. Глядя на вкладку сети, он показывает задержку в 3 секунды, когда ничего не делает.   -  person AngularM    schedule 05.12.2016
comment
можете ли вы сказать нам, что это за ничего на основе Developers.google.com/web/tools/chrome-devtools/ ?   -  person shusson    schedule 05.12.2016
comment
@shusson Я добавил скриншот. Кроме того, это адрес: thepoolcover.co.uk. Также я добавил результат теста скорости: webpagetest.org/result/161205_0H_S4H   -  person AngularM    schedule 05.12.2016
comment
Возможный дубликат Как повысить производительность загрузки приложений Angular2?< /а>   -  person silentsod    schedule 05.12.2016
comment
Некоторые указатели stackoverflow.com/a/63279047/5043867   -  person Pardeep Jain    schedule 10.08.2020

Ответы (2)


arrow_upward
6
arrow_downward

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

Например, вы НЕ должны импортировать ..

import { Observable } from 'rxjs/Rx';

Это импортирует всю огромную библиотеку RXJS.

import { Observable } from 'rxjs/Observable';

Будет просто импортировать то, что вам нужно.

Удалите все ссылки на «rxjs/Rx», и вы увидите значительное ускорение загрузки страницы.

person danday74    schedule 05.12.2016
comment
Я проверю, использую ли я это. Я так не думаю. - person AngularM; 05.12.2016
comment
Я не использую Observable - person AngularM; 05.12.2016
comment
Я использую много импортных наблюдаемых. Только в одном месте я загружал весь Rx. Замена его только на Observable сэкономила мне как минимум 1,5 секунды времени инициации. Я все еще пытаюсь понять, сколько я могу сэкономить.... - person Giannis Paraskevopoulos; 14.06.2018

arrow_upward
0
arrow_downward

не используйте systemjs для производства.

использовать предварительную (AOT) компиляцию.

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

person user1990    schedule 05.12.2016
comment
Спасибо посмотрю. Почему systemjs не идеален для производства? - person AngularM; 05.12.2016
comment
SystemJS хорош для производства, если используется правильно. SystemJS поддерживает ленивую загрузку пакетов по запросу. Например, вы можете импортировать одним щелчком мыши, когда модуль нужен в первый раз. Кроме того, маршрутизатор Angular2 теперь поддерживает ленивую загрузку целых маршрутов с помощью SystemJS. Если вы правильно настроите свое приложение, SystemJS будет в полном порядке. - person danday74; 05.12.2016
comment
@ danday74, не могли бы вы добавить ссылку на пример маршрутизации, на которую вы ссылаетесь, для ленивой загрузки маршрутов, тогда я сравню со своим. Кроме того, я добавлю свой к вопросу выше - person AngularM; 05.12.2016
comment
вы спросили нужного человека - вот код, который я написал специально для изучения ленивой загрузки маршрутов - github.com/danday74/angular2-router-modular/tree/master/app - я тоже найду ссылку на документы - person danday74; 05.12.2016
comment
Вот ссылка на документы - angular .io/docs/ts/latest/guide/ — мой пример минимален, и ему должно быть легко следовать — документы довольно подробные и не такие ясные — используйте то, что вы предпочитаете :) Да благословит Бог - person danday74; 05.12.2016
comment
@ danday74 Я добавил изображение своих файлов и трафика выше. адрес thepoolcover.co.uk - person AngularM; 05.12.2016
comment
@danday74 спасибо за отправку этой ссылки: github.com/danday74/angular2-router-modular/tree/master/app — я уже делаю это со своими маршрутами. Кроме того, я проверил, использую ли я наблюдаемые, а я нет. Можете ли вы взглянуть на мой тест скорости выше? что еще можно попробовать... - person AngularM; 05.12.2016
comment
сколько запросов вы получаете на вкладке NET при загрузке страницы и для чего они нужны? - person danday74; 05.12.2016
comment
@danday74 всего у меня 17 запросов. Я также прикрепил новый снимок экрана выше этих запросов. Запросы представляют собой минимизированный app.js (700 КБ файлов js моего приложения), shim.js, очень маленькое изображение спрайта, минимизированный css, некоторый значок значка и один скрипт внешнего шрифта, который представляет собой небольшой запрос. - person AngularM; 05.12.2016
comment
какое время загрузки для каждого, любое из которых занимает много времени? - person danday74; 05.12.2016
comment
Все мои файлы очень маленькие, и на самом деле приложение загружается за 500 миллисекунд. Кажется, для загрузки маршрутов приложений требуется некоторое время - person AngularM; 05.12.2016
comment
Хостинг быстрый, а Cloudflare в порядке. - person AngularM; 05.12.2016
comment
извините, я пытался получить доступ к вашему сайту, чтобы посмотреть, но мой прокси-сервер не позволит мне получить к нему доступ. Я предлагаю использовать онлайн-инструменты, которые определяют, почему ваш сайт загружается медленно. надеюсь, это поможет выявить любые узкие места. попробуйте это developers.google.com/speed/pagespeed/insights - person danday74; 05.12.2016
comment
@ danday74 Я перепробовал все тесты скорости. Все говорят, что это очень быстро. Но angular2 не показывает сайт. Просто показывает синий экран при загрузке. Это одна из моих страниц, которую я тестировал на скорость: webpagetest.org/result/161205_AD_19H8 /1/ - person AngularM; 05.12.2016
comment
@ danday74 может ли мое приложение работать медленно, потому что у меня 59 маршрутов? У меня есть более одного имени маршрута для одного компонента приложения, например. У меня домашняя страница: / и /home и /homepage - person AngularM; 05.12.2016
comment
я не знаю, я предлагаю уменьшить количество маршрутов и посмотреть, ускорит ли это процесс, тогда, по крайней мере, вы знаете, в чем проблема - person danday74; 06.12.2016