Chapter10. 자바스크립트를 최소화하라.
1. 최소화(minification).
최소화는 코드의 불필요한 문자를 줄여서 파일 크기를 줄여 로딩 시간을 개선하는 것을 말한다. 코드를 최소화하면 모든 주석뿐만 아니라 필요 없는 공백(스페이스, 개행, 탭)이 제거 된다. 자바스크립트의 경우 다운로드되는 파일의 용량이 줄어들기 때문에 응답 시간이 더 빨라진다.
2. 난독화(obfuscation).
난독화는 소스 코드에 적용되는 최소화의 대안적인 기술이다. 난독화는 주석과공백 뿐만 아니라 코드 또한 변경하여 알아보기 힘들게 만든다. 코드 변경은 함수와 변수의 이름을 더 짧게 만들기 때문에 성능에는 도움이 되지만 읽기가 어려워지고 버그 발생 확률이 오르며, 유지보수 및 디버깅 또한 더 어렵다.
3. 얼마나 절약되는가?
자바스크립트를 최소화하는 가장 대표적인 툴은 더글러스 크록퍼드가 개발한 JSMin 이다. 난독화의 경우 Dojo Compressor(ShrinkSafe)가 무난하며 선택의 폭이 좁다. 보통은 난독화의 위험을 감수할 만한 추가적인 이득은 없으며 100K이상의 큰 자바스크립트를 가지고 있을 경우 가끔 난독화를 적용하기도 한다. gzip을 추가할 경우 둘의 차이는 더 줄어든다.
4. 예제.
http://stevesouders.com/
5. 금상첨화.
ㄱ. 인라인스크립트.
외부 파일 자바스크립트 뿐만 아니라 인라인스크립트 까지 최소화 하라.
ㄴ. Gzip의 최소화.
JSMin 이나 Dojo Compressor 이후 Gzip을 적용하면 큰 효과를 볼 수 있으며, 굳이 난독화 할 필요없이 최소화만으로 파일 크기의 절감의 효율성을 확인 할 수 있다.
ㄷ. CSS 의 최소화.
CSS는 일반적으로 자바스크립트보다 공백이나 주석이 더 적기 때문에 큰 효과를 볼 수는 없지만 동일한 클래스는 합치고 사용하지 않는 것은 삭제하며 단축('#660066' 대신 '#606')을 이용하고 불필요한 문자를 제거('0px' 대신 '0')하여 최소화를 할 수 있다.
자바스크립트 코드를 최소화하라.