Как сжать и оптимизировать приложение Angular2

Я хочу сделать мое приложение angular -cli быстрее!

Правильно, поэтому я провел несколько дней, обновляя свое приложение NG2 для работы с angular -cli. Сначала это был довольно неприятный опыт, однако я действительно вижу свет и наслаждаюсь процессом развития. Ясно, что в каркас были включены тяжелая работа и мысли.

Но мое приложение медленное:

Согласно Pingdom, мое приложение работает быстрее, чем 21% всех других сайтов в Интернете. Справедливости ради, это из коробки ng build, и я уверен, что могу значительно ускорить это.

Мой последний вопрос: как радикально уменьшить размер веб-сайта angular?

В своем роде приложение: fairplay.poker, занимает 7 секунд, чтобы загрузить (если вы живете в Нью-Йорке), поэтому я уверен большинство людей будут двигаться дальше, прежде чем у него будет возможность загрузить.

Очевидно, мне нужно отправиться в путешествие, чтобы радикально увеличить скорость приложения, но мне нужна ваша помощь! (потому что я не знаю, что делаю:)

Что такое стандартная практика и где я даже начинаю разбирать это?

PROGRESS:

По мере внесения предложений я обновляю их здесь.

1. @cyrix Предлагаемое производство готовой сборки: ng build -prod

Zip файл, упавший более чем на один мегабайт, и новая статистика из Pingdom значительно улучшилась от исходной статистики:

2. Рекомендуемое уменьшение размера изображения.

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

3. @yurzui предложил сжатие gzip, поэтому я включил это. По-видимому, он работает, а общий размер файлов уменьшен более чем на половину (609 байт), однако это не отображается на Pingdom. Я отмечаю, что оценка несколько улучшилась.

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

4 @Yuruzi предложил реализовать кеш браузера. Поэтому я сделал это!

Что действительно интересно - это улучшение качества, которое порождает! Время загрузки немного быстрее, и сайт сейчас занимает 74%. Как предложил Юрузи, я использовал этот пост для руководства.

5 Благодаря @wafflej0ck на канале #angularjs. Кажется, мне нужно улучшить GZip, который я сделал, перейдя к типу сжатия AddOutputFilterByType DEFLATE *, как описано здесь.

Это, кажется, перегружает сайт:

6 Было предложено использовать AOT, поэтому я вынул страницу из этот пост.

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

Я прочитал в GitHub, что angular -Cli поставляется с AOT предварительно включенным, и вышеупомянутая статья не имеет отношения к делу. Я не уверен, насколько это верно, но я выполняю следующую команду при компиляции кода: ng build --prod --aot

7. Измените файл mod_expires.c в файле htaccess.

Оценка производительности значительно улучшилась до 98%, время загрузки теперь под вторым, а сайт быстрее, чем 91% проверенных веб-сайтов.

В настоящее время файл выглядит следующим образом:

ExpiresActive On ExpiresDefault "доступ плюс 2 дня" ExpiresByType image/x-icon "доступ плюс 1 год" ExpiresByType image/jpeg "доступ плюс 1 год" ExpiresByType image/jpg "доступ плюс 1 год" ExpiresByType image/png "доступ плюс 1 год" ExpiresByType image/gif "доступ плюс 1 год" ExpiresByType application/x-shockwave-flash "доступ плюс 1 месяц" ExpiresByType text/css "доступ плюс 1 месяц" ExpiresByType text/javascript "доступ плюс 1 месяц" ExpiresByType application/pdf "доступ плюс 1 месяц" ExpiresByType application/javascript "доступ плюс 1 неделя" Приложение ExpiresByType/x-javascript "доступ плюс 1 неделя" ExpiresByType text/javascript "доступ плюс 1 неделя" ExpiresByType text/html "доступ плюс 600 секунд" ExpiresByType application/xhtml + xml "доступ плюс 600 секунд"

На данный момент я не могу не думать, что теперь я имею дело с уменьшением отдачи.

Удалены Нежелательные шрифты и неиспользуемые изображения, которые были вложены в css.

Время загрузки снизилось, и производительность сайта теперь составляет 100%

Медленный DNS и SSL

Я заметил, что значительное время загрузки было связано с DNS и SSL. Чтобы исправить это, я подписался на бесплатную учетную запись CloudFlare, так как у них есть узлы почти везде, это должно было ускорить несколько вещей...

И в самом деле. К сожалению, нью-йоркский хост из PingDom был удален, но статистика из Далласа выглядит довольно многообещающим, сокращая время загрузки до уровня секунды!

ДРУГИЕ ХОРОШИЕ СТАТЬИ

У этого парня есть хорошая статья об оптимизации сайтов angular, а также

Ответ 1

Есть несколько вещей, которые позволяют увеличить скорость вашего приложения, среди прочих:

Используйте ленивую загрузку модулей, где это возможно (ссылка)
создать проект с профилем
Используйте Впереди времени (AOT) компиляция (ссылка)
Использование Angular -Универсальный позволяет перемещать часть рендеринга проекта на серверную

Ответ 2

Для тех, кто интересуется файлом HTACCESS, который я использую, вот он. Это заставляет https замедлять работу примерно на 100 мсек:

#REDIRECT ROUTES TO INDEX (fixes broken routes with angular)
RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
#ENABLE GZIP COMPRESSION TO IMPROVE PERFORMANCE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# SET EXPIRE HEADERS TO IMPROVE PERFORMANCE
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 2 days"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/javascript "access plus 2 week"
  ExpiresByType application/x-javascript "access plus 2 week"
  ExpiresByType text/javascript "access plus 2 week"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers