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, так это то, что он переносит эти накладные расходы со стороны клиента на сторону сервера.
Итак, теперь это произойдет,
- Сервер отобразит и сгенерирует HTML-представление, связанное с запрошенным маршрутом, и отправит его с файлом
index.html. - Затем другие ресурсы (файлы javascript, о которых я упоминал выше) будут загружаться в фоновом режиме, пока пользователи наслаждаются контентом.
Примечание. Это не лишает приложение преимуществ SPA, поскольку после начальной загрузки приложение будет вести себя как приложение SPA. Единственное отличие состоит в том, что исходный контент отображается на стороне сервера и отправляется с начальным ответом.
Это не единственное преимущество использования angular universal. Некоторые браузеры приложений сборки (например, встроенный браузер приложения Linkedin) могут не иметь богатых API-интерфейсов javascript, необходимых для рендеринга SPA. Некоторые проблемы, которые могут возникнуть в этих легких веб-браузерах, могут быть решены.
Еще одним недостатком SPA является отсутствие поддержки SEO, поскольку сканеры должны понимать и отображать сайт с помощью javascript для получения побочного контента.
Вот руководство по настройке Angular Universal в приложении angular.
Наконец, в приведенной выше ссылке вы не видите никаких красивых изображений, верно? Собственно, угловые документы также создаются с помощью angular. Как вы, возможно, уже знаете, социальные сети и другие сканеры (в данном случае поисковый робот Medium) должны представлять тег метаданных на странице, чтобы отображать эскизное изображение. С angular это невозможно, поскольку в качестве ответа приходит пустой index.html. Таким образом, вы видите только заголовок Angular Docs без изображения.
С угловым универсалом это возможно.
Спасибо, что уделили несколько минут чтению этой статьи ❤
Надеюсь, это поможет улучшить производительность вашего следующего приложения angular. Удачного кодирования !!
