Начало работы: оптимизация приложения Angular

Хотите сделать свой сайт на Angular максимально быстрым и доступным? Вы пришли в нужное место!

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

Что в этой коллекции?

В этом сборнике основное внимание уделяется пяти основным областям оптимизации приложения Angular:

  • Улучшение производительности вашего приложения для увеличения конверсии и вовлеченности пользователей.
  • Повышение надежности вашего приложения в плохих сетях за счет предварительного кэширования ресурсов с помощью сервис-воркера Angular.
  • Сделайте ваше приложение доступным для поиска поисковыми системами и ботами социальных сетей с помощью предварительного рендеринга и рендеринга на стороне сервера.
  • Сделайте ваше приложение доступным для установки , чтобы обеспечить взаимодействие с пользователем, аналогичное приложению iOS/Android.
  • Улучшение доступности вашего приложения, чтобы сделать его удобным и понятным для всех пользователей.

В каждом посте сборника будут описаны методы, которые вы можете напрямую применить к своим собственным приложениям.

Чего нет в этой коллекции?

В этой подборке предполагается, что вы уже знакомы с Angular и TypeScript. Если вы еще не уверены в них, ознакомьтесь с документацией TypeScript и руководством «Начало работы с Angular» на angular.io .

Начать проект

Интерфейс командной строки Angular (CLI) позволяет быстро настроить простое клиентское приложение Angular. В этом посте содержится краткое введение в CLI, а в других постах коллекции показано, как добавить более продвинутые функции, такие как рендеринг на стороне сервера и поддержка развертывания.

Настройте интерфейс командной строки

Для начала установите CLI глобально и убедитесь, что у вас установлена ​​последняя версия, выполнив следующие команды:

npm i -g @angular/cli
ng --version

Убедитесь, что последняя команда выводит версию 8.0.3 или новее.

В качестве альтернативы, если вы не хотите устанавливать CLI глобально, вы можете установить его локально и запустить с помощью команды npx :

npm i @angular/cli
npx ng --version

Создать проект

Чтобы создать новый проект, выполните:

ng new my-app

Эта команда создаст исходную структуру файлов и папок для вашего приложения и установит необходимые модули узлов.

После успешного завершения процесса установки запустите приложение, выполнив:

cd my-app
ng serve

Теперь вы сможете получить доступ к своему приложению по адресу http://localhost:4200 .

Что дальше?

В оставшейся части этой коллекции вы узнаете, как улучшить производительность, доступность и SEO вашего приложения Angular. Вот что рассматривается:

  • Разделение кода на уровне маршрута в Angular
  • Бюджеты производительности с Angular CLI
  • Стратегии предварительной выборки маршрутов в Angular
  • Оптимизация обнаружения изменений в Angular
  • Виртуализируйте большие списки с помощью Angular CDK
  • Предварительное кэширование с помощью Angular Service Worker
  • Предварительная визуализация маршрутов с помощью Angular CLI
  • Серверный рендеринг с помощью Angular Universal
  • Добавьте манифест веб-приложения с помощью Angular CLI
  • Аудит доступности с помощью codelyzer