YUI 압축기 압축 JavaScript 원리 및 micro-optimization_javascript 기술

최근에 jQuery 플러그인을 작성했는데, 최적화가 완료됐을 때 압축된 파일이 상대적으로 크다는 것을 알았고, 수정하고 최적화할 수 있는 부분이 많다는 걸 알게 됐어요. 이번에 YUI Compressor로 JavaScript를 압축하게 되었는데, 압축할 수 있는 것, 특히 압축할 수 없는 것들은 매우 명확해야 파일을 보관할 수 있는 플러그인을 작성할 수 있다는 것을 깊이 이해하게 되었습니다. 더 작고 코드가 더 컴팩트하며 최적화 과정에서 코드가 더 작아야 한다는 것도 알게 될 것입니다. 개선 사항은 앞으로 큰 도움이 될 것입니다. 우연히 인터넷에서 글을 찾아 녹음해봤습니다.

YUI Compressor는 다음을 포함한 JavaScript 콘텐츠를 압축합니다. :
댓글 제거
추가 공백 제거
미세한 최적화
식별자 교체

무엇 YUI Compressor에는 미묘한 최적화가 포함되어 있나요?
object["property"] , 속성 이름이 유효한 JavaScript 식별자(참고: 유효한 JavaScript 식별자는 문자로 시작하고 선택적으로 하나 이상의 문자, 숫자 또는 밑줄이 뒤따름)이고 속성 이름이 아닌 경우 예약어는 object.property
{"property":123}에 최적화됩니다. 속성 이름이 유효한 JavaScript 식별자이고 예약어가 아닌 경우 {property:123}( 참고: 객체 리터럴에서는 속성 이름이 합법적인 JavaScript 식별자이고 예약어가 아닌 경우 속성 이름을 인용할 필요가 없습니다.
'abcd'efgh'는 'abcd'efgh'로 최적화됩니다.
"abcd" "efgh", 문자열 연결인 경우 "abcdefgh"로 최적화됩니다. (참고: 모두 YUI Compressor를 사용한다는 전제 하에 스크립트의 문자열 연결에는 커넥터 " "를 사용합니다. 효율성과 최고의 유지 관리성을 위해).
JavaScript의 가장 효과적인 압축 최적화는 식별자 교체입니다.
예:

코드 복사 코드는 다음과 같습니다.

(function( ){
function add(num1, num2) {
return num1 num2;}
})()

속성 식별자를 바꾼 후:

코드 복사 코드는 다음과 같습니다.

(function(){
function A(C , B) {
return C B;
}
})();

추가 공백을 제거하면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(function(){function A(C,B){return C B;}})() ;

YUI 압축기 식별자 대체는 함수 이름과 변수 이름만 대체할 수 있는데 대체할 수 없는 것은 무엇입니까? 기본 값: 문자열, 부울, 숫자, null 및 정의되지 않음. 일반적으로 문자열이 가장 많은 공간을 차지하고 숫자가 아닌 리터럴(true, false, null, underfinded)이 그 뒤를 따릅니다.
전역 변수: 창, 문서, XMLHttpRequest 등 가장 일반적으로 사용되는 것은 문서와 창입니다.
속성 이름(예: foo.bar) 차지하는 공간은 문자열 다음으로 많습니다. "." 연산자는 대체될 수 없으며 a.b.c는 더 많은 공간을 소비합니다.
키워드. 자주 사용되는 키워드는 var, return입니다. 최고의 최적화 방법: var 및 return 키워드는 함수에서 한 번만 나타납니다.
기본 값, 전역 변수 및 속성 이름에 대한 최적화 처리는 대략 동일합니다. 2회 이상(포함) 사용된 모든 리터럴 값, 전역 변수 또는 속성 이름은 로컬 변수 저장소로 대체되어야 합니다.
단, 식별자 대체가 금지되는 경우도 있습니다.
eval() 함수를 사용하세요. 해결책: 전역 함수 래퍼 eval()을 사용하거나 생성하지 마십시오.
with 문을 사용하세요. 해결책: 방법은 위와 동일합니다.
JScript에 대한 조건부 주석입니다. 유일한 해결책은 사용하지 않는 것입니다.
YUI Compressor는 Rhino 인터프리터를 기반으로 구축되었으므로 위의 모든 최적화가 안전합니다.