Angular — уроки, советы и рекомендации

Angular — уроки, советы и рекомендации

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

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

1. Отмените подписку на observable RxJS

Каждый раз, когда компонент или директива уничтожается, подписка на observable остается активной. Поэтому важно отказаться от подписки на него, чтобы освободить память в системе. Есть много способов сделать это, но я предпочитаю использовать функцию takeUntil:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Если вам нравятся декораторы, вы можете рассмотреть этот пакет, который предоставляет декларативный способ отмены подписки на observable при уничтожении компонента: https://github.com/NetanelBasal/ngx-take-until-destroy

PS: Вам не нужно беспокоиться об отмене подписки, если вы используете AsyncPipe, потому что она отписывается автоматически. Кроме того, методы, кроме take(n), takeWhile(predicate), first() и first(predicate) отписываются сами.

2. Создайте более элегантный импорт с помощью алиасов typescript

Когда кодовая база начинает разрастаться, вы можете встретиться, например, с таким импортом:

Это очень раздражает, потому что вы не знаете, сколько точно точек-точек-слэш вам нужно написать. Фактически, компилятор TypeScript позволяет использовать сопоставление маршрутов, поэтому мы можем импортировать файлы следующим образом:

Все, что нам нужно сделать, это определить пути и свойства baseUrl в разделе compilerOptions в файле tsconfig.json. Важно знать, что все пути обрабатываются относительно baseUrl. Пример:

3. Используйте trackBy в *ngFor

Когда мы используем директиву *ngFor, изменения DOM отслеживаются идентификатором объекта. Это подходит для большинства ситуаций, но с введением немутационных практик и Redux мы получаем каждый раз новые объекты. Это означает, что каждый раз *ngFor отображает список в DOM, но мы знаем, что операции DOM очень затратны.

Когда мы используем trackBy с *ngFor, он начинает распространение изменений, отслеживаемых данным идентификатором, а не идентификатором объекта. Пример:

4. Используйте интерфейсы вместо классов

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

5. Очистите все консоли

Во время разработки мы пишем много console.logs для отладки приложения, и иногда мы показываем некоторые сведения, которые не хотим, чтобы видели наши пользователи. Мы можем очень просто это удалить, используя несколько строк кода для рабочей сборки. Добавьте этот код в inmain.js:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

6. Проинспектируйте пакет с помощью webpack-bundle-analyzer

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

Подробнее об этом инструменте вы можете прочитать здесь: https://alligator.io/angular/bundle-size/

7. Не задавайте отложенную загрузку для маршрута по умолчанию

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

Когда пользователь открывает приложение, он будет перенаправлен к маршруту /mymodule, который вызовет отложенную загрузку MyModule. Это приведет к дополнительному HTTP-запросу для загрузки mymodule.module и некоторым ненужным операциям (парсинг и оценка JavaScript VM). В результате это замедляет первоначальный рендеринг страниц. Поэтому рекомендуется объявить маршрут по умолчанию как неотложенный.

8. Перехватывайте все ошибки с помощью специального обработчика ошибок

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

Расширение обработчика ошибок Angular

Расширение обработчика ошибок Angular выполняется довольно просто. Все, что нам нужно сделать, это создать класс, который расширяет ErrorHandler Angular и переопределяет метод handleError. Пример:

После этого нам нужно зарегистрировать пользовательский AppErrorHandler в app.module.ts:

Оберните аргументы console.log в литерал объекта, чтобы вывести имя переменной вместе со значением.

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

Автор: Alexandru Bereghici

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree