Гады Тал, 29 мая 2019 г.

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

Что ж, здесь я столкнулся с теми же проблемами, и я решил провести небольшое исследование, чтобы узнать, как снова сделать мое приложение Angular.js отличным! 🚤🏎⚡️🎢

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

Тестирование и профилирование

Одной из наиболее важных функций Angular.js является двусторонняя привязка, приложение управляет данными, проверяя переменные на предмет обновления каждые $ дайджест, с помощью наблюдателей angular.js для каждой привязки переменной. наша цель - сократить время $ дайджеста, тем самым сделав приложение намного быстрее.

Приложение - инициализация

  • ленивая загрузка - поиск тяжелых компонентов, которые требуют некоторого времени загрузки или имеют тяжелые зависимости - если их не нужно загружать при инициализации приложения, вы всегда можете разделить свои модули и параллельную загрузку с помощью справка пакетов веб-пакетов https://webpack.js.org/guides/code-splitting/
  • УДАЛИТЕ неиспользуемые файлы !!! - для уменьшения размера пакета.

Текущая производительность

  • ng-if вместо ng-show
  • Используйте track by в директиве ng-repeat
  • Используйте $watchCollection (включает 3-й параметр) (вместо $watch) - это сохраняет глубокий поиск объекта.

Debounce ng-model, сократит время обновления - ng-model-options="{ debounce: 250 }.

  • используйте <span ng-bind="$ctrl.user"></span> вместо {{$ctrl.user}}
  • Ввести в конфигурацию - $httpProvider.useApplyAsync(true), для лучшей обработки HTTP-запроса с лучшим количеством $digest
  • Ввести в config - $httpProvider.debugInfoEnabled(false), отключить отладочную компиляцию только в продакшене.
  • Используйте $filter('date')(time,'dd-mm-yyyy') вместо {{time | date: 'dd-mm-yyyy'}} - это в два раза быстрее.
  • По возможности используйте привязку один раз - :: нотация, чтобы разрешить одноразовую привязку, проверьте, можно ли использовать с конвейером трансляции
  • font-display: swap; для отложенной загрузки текста перед пользовательскими шрифтами.
  • Используйте Loadash или собственный Js вместо функции angular core
  • Свернуть наблюдателей - используйте Батаранг для сравнения ваших наблюдателей.
  • По возможности избегайте повторных фильтров и кеширования данных, например вместо Angular.js native| translatepipe вы можете использовать пакет angular-translate-onc.

Заключение

Как видите (с расширением batarang), наше время безотказной работы было улучшено с небольшой помощью нашего модуля разделения и отложенной загрузки.

Для наблюдателей и дайджеста мы видим, что, несмотря на небольшое увеличение количества наблюдателей, окончательное время дайджеста сокращается на 75% ( !) и удвоение количества дайджестов за 30 секунд.

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