Angular - это круто. По сравнению с веб-приложением с расширением и R (SSR), одностраничные приложения (SPA) имеет множество преимуществ, но есть и недостатки.

Гибридный подход универсального использования Angular, чтобы унаследовать некоторые преимущества SSR для вашего приложения angular.

В этой статье мы будем рассматривать только производительность.

Проблема: мобильные устройства работают медленно, но важны

Когда дело доходит до мобильных устройств, приложения angular работают медленно, вот почему приложения angular (или любой другой SPA) медленны на мобильных устройствах и почему мобильные устройства важны.

Знаете ли вы: более 90% пользователей заходят в facebook с мобильного устройства вместо настольного компьютера

Мобильные устройства стали основным средством доступа к Интернету, а не только к Facebook. Это означает, что вероятность того, что вы читаете эту статью с мобильного устройства, составляет 90%.

Имея это в виду, после создания приложения angular мы получаем кучу миниатюрных файлов javascript, подобных этому, поскольку вы можете видеть, что в моем случае некоторые файлы могут даже превышать 800 КБ.

После того, как мы развернули эти файлы на сервере и пользователь запросил у веб-сайта пустой index.html с этими сценариями в <head>, он отправит обратно клиенту. Затем начинается рендеринг приложения, и пользователи будут видеть белый пустой экран, пока эти файлы не будут полностью загружены.

По сравнению с настольным компьютером мобильное устройство имеет низкую производительность как с точки зрения скорости сети (возможно, подключенной к сети 2G или 3G), так и скорости процессора.

Знаете ли вы: согласно исследованию, проведенному в Google, если веб-страница не загружается в течение 3 секунд, вероятность того, что пользователь покинет веб-сайт, увеличивается на 32%, которая увеличивается до 90%, когда начальная загрузка занимает 3 секунды. до 5 секунд.

Так что вы проиграете битву еще до того, как она начнется.

Решение

Angular universal предоставляет возможности для рендеринга на стороне сервера. Предположим, существует веб-сайт электронной коммерции, и какой-то пользователь видит рекламу продукта в Facebook.

Таким образом, информация о продукте доступна по этому URL-адресу,

Https://my-ecom.com/store-141/product-1414

Если мы не используем angular universal, сначала загружаются файлы javascript, включающие модуль приложения, затем загружаются корзина покупок, страница покупки продукта и все те шаблоны, которые скомпилированы в файлы javascript. Затем начинается рендеринг. Таким образом, пользователь должен дождаться, пока все эти загрузка и рендеринг произойдут на мобильном телефоне, чтобы просмотреть страницу с описанием продукта.

Ожидает 3 секунды 5 секунд, но загрузка продолжается ………………… ..

Что делает angular universal, так это то, что он переносит эти накладные расходы со стороны клиента на сторону сервера.

Итак, теперь это произойдет,

  1. Сервер отобразит и сгенерирует HTML-представление, связанное с запрошенным маршрутом, и отправит его с файлом index.html.
  2. Затем другие ресурсы (файлы javascript, о которых я упоминал выше) будут загружаться в фоновом режиме, пока пользователи наслаждаются контентом.

Примечание. Это не лишает приложение преимуществ SPA, поскольку после начальной загрузки приложение будет вести себя как приложение SPA. Единственное отличие состоит в том, что исходный контент отображается на стороне сервера и отправляется с начальным ответом.

Это не единственное преимущество использования angular universal. Некоторые браузеры приложений сборки (например, встроенный браузер приложения Linkedin) могут не иметь богатых API-интерфейсов javascript, необходимых для рендеринга SPA. Некоторые проблемы, которые могут возникнуть в этих легких веб-браузерах, могут быть решены.

Еще одним недостатком SPA является отсутствие поддержки SEO, поскольку сканеры должны понимать и отображать сайт с помощью javascript для получения побочного контента.

Вот руководство по настройке Angular Universal в приложении angular.



Наконец, в приведенной выше ссылке вы не видите никаких красивых изображений, верно? Собственно, угловые документы также создаются с помощью angular. Как вы, возможно, уже знаете, социальные сети и другие сканеры (в данном случае поисковый робот Medium) должны представлять тег метаданных на странице, чтобы отображать эскизное изображение. С angular это невозможно, поскольку в качестве ответа приходит пустой index.html. Таким образом, вы видите только заголовок Angular Docs без изображения.

С угловым универсалом это возможно.

Спасибо, что уделили несколько минут чтению этой статьи ❤

Надеюсь, это поможет улучшить производительность вашего следующего приложения angular. Удачного кодирования !!