[Code Compressor] 코드 컴프레셔를 사용하여 소스코드 파일 용량 줄이기



#. Introduction


이번에는 Code Compressor 를 사용하여 코드를 압축하는 방법을 알아보도록 하겠습니다. 코드 컴프레셔(코드압축기)의 용도는 소스코드의 공백과 주석등을 지워버리는 것으로 소스코드의 용량을 줄이는 것입니다.



#. Description


코드 컴프레셔의 사용이유는 단 하나입니다. 코드 압축을 통해 로딩시간을 줄이는 것입니다. 웹페이지의 경우 로딩을 할 때, 자바스크립트나 이미지 파일을 읽어들이게 되는데 코드의 공백이나 주석도 용량을 차지하기 때문에 많을수록 로딩속도가 느려집니다. 웹페이지의 로딩 이유에는 검색 알고리즘, 쿼리 최적화의 부재나 대용량의 이미지사용 등 여러가지가 있겠으나, 코드의 용량을 줄이는 것이 가장 먼저 해야 할 작업입니다. 



#. HTML Compressor


다음의 사진은 코드 압축 전과 후의 용량차이를 아주 극명하게 보여줍니다. 두 배가 넘게 차이가 나죠. 해당 코드는 App Basic Free 1.0 버전의 skin.html 으로 테스트 한 것입니다. 이름은 HTML Compressor 지만, CSS 및 자바스크립트와 PHP, ASP 압축도 지원합니다.


https://htmlcompressor.com/compressor/




페이지 접속 이후, 옵션란에 보시면 다음과 같은 화면을 보실 수 있는데, 저 같은 경우 보통 다음과 같은 옵션을 자주 사용합니다. 옵션은 여러가지가 있으니 오른쪽에 있는 (?) 버튼을 통해 알아보실 수 있습니다.




#. PostScript


웹이든 응용프로그램이든 구현은 물론 중요하지만, 그것보다 중요한 것은 방법론입니다. 어떤 방법으로 구현하고, 어떻게 최적화를 하고, 어떤 알고리즘을 적용할 것인지가 프로그램의 질적 향상을 가져옵니다. 구현은 어떻게든 한다해도, 더 나은 코드와 최적화까지 생각한다면 정말 머리가 아파 올 것입니다. 이번 포스팅은 단순한 코드 압축이지만, 웹페이지 로딩에 있어서는 나름대로 적지 않은 영향을 미칠 수 있습니다. 파일이 많으면 많을수록 말이죠.


보통 라이브러리를 보면 자바스크립트 파일의 이름에 *.min.js 의 형식으로 된 것이 있는데, min 의 의미는 코드를 압축하였다는 얘기입니다. 사람이 코드를 수정하고자 하는 용도가 아닌, 프로덕션환경에 적용시키려고, 혹은 배포를 위해 압축을 한 것입니다.



신고