압축과 난독화
일반적으로 서비스에서 공통으로 사용되는 주요 소스 코드들은 별도의 파일로 분리하여 사용한다.
이렇게 관리할 경우 코드의 재사용, 캐시 적용, CDN 사용 등 여러 가지 장점이 있다.
그 중 코드 압축은 최소의 노력으로 큰 효과를 볼 수 있는 최적화 방법 중 하나다.
파일의 용량이 줄어들고 민감한 코드를 알아보기 어렵게 만들 수 있다.
경우에 따라서는 스크립트의 수행 속도에도 영향을 미치기도 하고 설정에 따라 압축한 소스로도 디버깅을 할 수 있도록 해주는 Source Maps 기능을 사용할 수도 있다.
압축(Minify)
코드 압축은 다음의 항목에 해당하는 코드들을 줄이는 행위를 말한다.
- 불필요한 줄바꿈, 공백 밑 들여쓰기
- 짧게 쓸 수 있는 긴 구문 (줄일 수 있는 if 구문, 형 변환 축약 등)
- 스코프 내 사용하지 않는 변수
- 주석
- (경우에 따라서) console.log, debugger 등의 디버깅용 구문 또는 메서드 호출
- (경우에 따라서) 무의미한 메서드 호출 및 루프
디버깅용 메서드 호출을 제거하는 기능은 옵션에 따라 적용이 가능하고, 무의미한 메서드 및 루프를 최적화하는 기능은 Google Closure Compiler를 사용하면 적용할 수 있다.
난독화(Uglify)
난독화는 자바스크립트 코드 자체를 분석하기 어렵게 만드는 과정이다.
난독화의 방법에는 변수명, 함수명 치환에서부터 자바스크립트의 일부 루틴을 문자열로 바꿔 변수에 담고 뒤섞는 단계까지 여러 단계가 있다.
난독화의 단계를 높일수록 루틴을 알아보기 어렵게 만들 수 있다.
"못하게"가 아니고 "어렵게"이다.
즉, 난독화를 했다고 자바스크립트 코드가 완벽하게 숨겨진다는 뜻이 아니다.
난독화만 믿고 별도의 보안 처리 없이 중요 정보나 루틴을 자바스크립트에 넣는 것은 매우 위험하다.
변수명, 함수명 치환 정도 단계는 원본과 비교하여 해석 및 실행 속도에서 차이가 나지 않는다.
변수, 함수명 등이 줄어 용량이 감소하지만 난독화 단계를 높일수록 코드를 해석하고 실행하는 속도가 느려질 수 있으므로, 프로젝트에 맞게 선택하여 적용하는 것이 좋다.