AngularJS 압축 JS 기술 분석

이 기사의 예제에서는 JS를 압축하는 AngularJS의 작동 기술을 설명합니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

대부분의 웹 프로젝트는 js 파일 크기를 줄이고 트래픽을 절약하기 위해 게시할 때 js 코드를 압축합니다.

원리는 매우 간단합니다. 매개변수, 일부 변수 이름 및 함수의 이름을 바꾸는 것입니다.

그러나 AngularJS 애플리케이션에서는 이러한 작업 방식에 예외가 있습니다.

AngularJS의 종속성 주입은 매개변수 이름을 기반으로 주입되므로 매개변수 이름을 바꾸면 당연히 이 메커니즘이 파괴됩니다.

특별한 처리를 하지 않으면 압축(축소) 후 실행 시 이런 오류가 발생합니다

알 수 없는 공급자: aProvider<-a

이에 대한 공식적인 설명 오류는 다음과 같습니다.

종속 서비스를 찾을 수 없습니다. 이는 이러한 종류의 종속성 주입으로 인해 오류가 발생함을 의미합니다.

다행히 AngularJS에는 이 문제를 처리할 수 있는 표준 메커니즘이 내장되어 있습니다.

가장 간단하고 일반적인 방법은 함수 대신 배열을 사용하는 것입니다. 예:

.controller('RegisterCtrl', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
  //do something
}]);

배열의 마지막 요소는 항상 함수이고 처음 몇 개의 매개변수는 모두 문자열이며 이 함수의 매개변수는 일대일 대응.

또 다른 형태는 소위 Annotation 방식입니다. 예를 들어

var objCtrl = function($scope, $timeout, $interval){
  // do something
}
//给objCtrl函数增加一个$inject属性，它是一个数组，定义了需要被注入的对象
objCtrl.$inject = ['$scope', '$interval', '$timeout'];

여기서 종속성 주입의 형태는 DI가 필요한 모든 것(지시문, 팩토리, 서비스 등)에 국한되지 않습니다. 종속성 주입)은 이 두 가지 방법을 사용할 수 있습니다.