Улучшить эту страницуЗапуск приложения AngularJS в режиме производства

Есть несколько вещей, которые следует учесть при запуске приложения AngularJS в режиме производства.

Отключение отладочных данных

По умолчанию AngularJS прикрепляет информацию о привязке и контекстах к узлам DOM и добавляет CSS-классы к элементам, связанным с данными:

• В результате интерполяций ngBind, ngBindHtml или {{...}}, данные привязки и CSS-классы ng-binding прикрепляются к соответствующему элементу.

• Там, где компилятор создал новый контекст, контекст и либо ng-scope или ng-isolated-scope CSS-класс прикрепляются к соответствующему элементу. К этим ссылкам на контексты можно получить доступ с помощью element.scope() и element.isolateScope().

• Комментарии-заполнители для структурных директивы будут содержать информацию о том, какая директива и привязка вызвали заполнитель. Например, <!-- ngIf: shouldShow() -->.

Инструменты, такие как Protractor и Batarang, нуждаются в этой информации для работы, но вы можете отключить её в режиме производства для значительного повышения производительности с помощью:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

Если вы хотите отладить приложение с этой информацией, откройте консоль отладки в браузере и затем вызовите этот метод напрямую в этой консоли:

angular.reloadWithDebugInfo();

Страница должна перезагрузиться, и отладочная информация теперь должна быть доступна.

Для получения дополнительной информации см. страницы документации по $compileProvider и angular.reloadWithDebugInfo.

Режим строгой инъекции зависимостей

Использование режима строгой инъекции зависимостей в вашем приложении для производства будет вызывать ошибки, когда инжектируемая функция не явно аннотирована. Режим строгой инъекции зависимостей предназначен для того, чтобы убедиться, что ваш код будет работать при минимизации. Однако он также заставит вас убедиться, что ваши инжектируемые функции явно аннотированы, что улучшит производительность Angular при инъекции зависимостей в ваши инжектируемые функции, поскольку ему не нужно будет динамически обнаруживать зависимости функции. Рекомендуется автоматизировать явную аннотацию с помощью инструмента, такого как ng-annotate, при развертывании в производство (и включении режима строгой инъекции зависимостей).

Чтобы включить режим строгой инъекции зависимостей, у вас есть два варианта:

<div ng-app="myApp" ng-strict-di>
  <!-- your app here -->
</div>

или

angular.bootstrap(document, ['myApp'], {
  strictDi: true
});

Для получения дополнительной информации см. Руководство по инъекции зависимостей.

Отключение директивы комментариев и CSS-классов

По умолчанию AngularJS компилирует и выполняет все директивы внутри комментариев и классов элементов. Для выполнения этой задачи компилятор AngularJS должен искать директивы следующим образом:

• Обработать все классы элементов вашего приложения.

• Обработать все комментарии html вашего приложения.

В настоящее время большинство проектов AngularJS используют только директивы элементов и атрибутов, и в таких проектах нет необходимости компилировать комментарии и классы.

Если вы уверены, что ваш проект использует только директивы элементов и атрибутов, и вы не используете никакие сторонние библиотеки, которые используют директивы внутри классов элементов или html-комментариев, вы можете отключить компиляцию директив для классов элементов и комментариев для всего приложения. Это приводит к увеличению производительности компиляции, так как компилятор не должен проверять комментарии и классы элементов, ища директивы.

Для отключения директив комментариев и CSS-классов используйте $compileProvider.

$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);

Для получения дополнительной информации см. страницы документации по $compileProvider.commentDirectivesEnabled и $compileProvider.cssClassDirectivesEnabled.