Home

오늘의 기억

[JavaScript] js 파일 용량 줄이기 (1) : 압축(Minify)과 난독화(Uglify)


개요

JavaScript로 FrontEnd 를 개발하는 경우 js 파일의 용량이 몹시 큰 경우가 있다. 특히 webpack을 이용하여 개발시 외부 라이브러리를 많이 사용할 수록 번들 파일의 용량이 어마어마하게 늘어난다.
용량이 늘어나면 브라우저에서 로딩 속도가 느리고, 그만큼 사용자에게 페이지가 ‘느리다’ 라는 인상을 심어준다.
이런 경우를 대비해 js 파일의 용량을 줄이는 여러가지 방법에 대해 포스팅을 하려한다.

첫번째는 가장 기본적인 압축(Minify)난독화(Uglify)이다.


압축 (Minify)

압축은 전체 소스코드 중 아래와 같은 경우를 제거하는 작업을 말한다.

  • 불필요한 줄 바꿈
  • 공백 및 들여쓰기
  • 짧게 쓸 수 있는 긴 구문 (줄일 수 있는 if문, 형 변환 축약 등)
  • 스코프 내 사용하지 않는 변수
  • 주석
  • 원본 코드에서 들여쓰기, 공백, 세미콜론, 콤마, 대괄호 등이 바르게 사용되지 않았을 경우 정상적으로 압축이 되지 않을 수 있다.

난독화 (Uglify)

난독화란 자바스크립트 코드 자체를 분석하기 어렵게 만드는 과정을 말한다.

  • 변수 및 함수명 등을 해석하기 힘든 짧은 단어 등으로 치환
  • 난독화를 했다고 보안 처리 없이 중요 정보나 루틴을 코드에 넣는 것은 위험
  • 난독화의 단계를 높일 수록 루틴을 알아보기 어렵게 만들 수 있음
  • 그러나 난독화 단계를 높일수록 코드를 해석하고 실행하는 속도가 느려질 수도 있으므로, 적절하게 선택하여 적용하는 것이 좋음
  • 하드 코딩된 문자열이나 코드는 난독화가 불가능하다.

실행 결과

실제 업무로 사용하고 있는 프로젝트의 JavaScript 소스 코드로 비교해봤다.
압축과 난독화를 하기 전에는 약 250MB 였으며, 실행하고 난 뒤에는 약 50MB로 1/5 정도로 용량이 줄어든 것을 확인할 수 있었다.


도구

온라인

온라인으로 손쉽게 압축 및 난독화를 제공해주는 사이트가 존재한다.
해당 사이트에 접속해 Original JavaScript 소스코드를 넣으면 압축과 난독화가 된 결과물을 얻을 수 있다.

  • https://www.uglifyjs.net/
  • https://skalman.github.io/UglifyJS-online/

라이브러리

압축과 난독화 기능을 제공해주는 다양한 방식의 라이브러리들이 존재한다.
몇 가지만 소개하자면 jar 파일로 제공하는 Google Closure Compiler과 npm 으로 제공하는 UglifyJS 가 존재한다.

webpack 설정

webpack을 이용한다면 간단하게 ‘mode’ 옵션을 ‘production’ 으로만 주면 해결된다. (webpack 4 이상)
만약 webpack 3 이하 버전을 사용한다면 UglifyJS Webpack Plugin 설정을 이용하면 된다.
물론 webpack 4 이상에서도 plugin 형태의 설정을 이용할 수도 있다.


같이 보기

20190603 Charyum.Park