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

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

Что такое Angular?

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

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

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

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

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

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

Эта коллекция предполагает, что вы уже знакомы с Angular и TypeScript. Если вы пока не чувствуете себя уверенно с ними, ознакомьтесь с документацией TypeScript и руководством Getting Started with Angular на angular.io .

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

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

Настройте 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