JavaScript 소스 크기 최적화

JavaScript 소스의 크기를 최적화하는 방법을 간단히 기록한다.

최적화 동기

회사 기존 제품 중에서 UI를 JavaScript로 구현한 모델을 업데이트해야 할 일이 생겼다. 나는 평소에는 JavaScript를 사용하여 코딩할 일이 전혀 없기에 JavaScript 코드가 낯설었는데, 필요한 부분만 조금씩 공부해 가면서 기존 코드의 이슈들을 수정해 나갔다.
그러다가 JavaScript 코드들은 컴파일 언어가 아니라 스크립트 언어이고, 따라서 소스 코드의 크기가 그대로 최종 이미지의 크기에 반영된다는 사실을 깨달았다.
즉, JavaScript 소스 코드는 동일한 코드이더라도 소스 코드 포매팅 등에 따라서 app의 크기가 달라지게 된다.

이 관점에서 기존 JavaScript 코드들을 보니 크기를 줄일 수 있는 개선점이 보여서 이번 글과 같이 개선하였고, 여기에도 간단히 기록을 남긴다.

최적화 툴을 사용하지 않는 경우

JavaScript 코드를 최적화하는 별도의 툴을 사용하지 않는 경우에는 아래 예와 같이 크기를 줄일 수 있다.

라인 엔디언을 Windows(CR + LF) 스타일에서 Linux(LF) 스타일로 변경한다.
코드에서 필요없는 공백이나 주석 등을 제거하고, 쓸데없이 긴 변수나 함수 이름은 간결하게 줄인다.
코드를 리팩토링하여 indent 깊이를 줄인다.

나는 일단 위 방법을 사용하여 최적화 툴을 사용하지 않는 경우에도 기본적으로 크기를 줄이도록 적용하였다.

최적화 툴 사용

별도의 최적화 툴을 사용하여 추가로 소스의 크기를 줄일 수 있다. 이를 위하여 보통 다음과 같이 minification 툴이나 obfuscation 툴을 이용할 수 있다.

Minification 툴: 불필요한 공백, 줄 바꿈, 주석, 그리고 변수명을 축소하여 파일 크기를 줄이는 방법
Obfuscation 툴: 변수명, 함수명을 더 짧게 변환하고 코드를 읽기 어렵게 만들어서, 파일 크기를 줄이는 동시에 난독화 시키는 방법

만약에 코드 난독화까지 필요하면 obfuscation 툴을 사용하면 되는데, 나는 코드 파일의 크기만 줄이면 되는 상황이어서 관련 툴을 찾아보니 UglifyJS 툴이 적당하였다.

UglifyJS 툴 기본 사용법

아래와 같이 설치할 수 있다.
```
$ npm install uglify-js
```
또는 아래와 같이 APT 패키지로 설치할 수 있다.
```
$ sudo apt install uglifyjs 
```
아래와 같이 실행하면 도움말이 출력된다.
```
$ uglifyjs --help
```
또, 아래와 같이 실행하면 각 옵션의 도움말이 출력된다.
```
$ uglifyjs --help options
```

사용 예

$ uglifyjs hello.js -o hello.min.js
$ uglifyjs hello.js --compress "drop_console=true" -o hello.min.js > /dev/null 2>&1

빌드시 자동으로 UglifyJS 적용하기

이미지를 빌드하는 기존 Makefile에 아래와 같이 추가하여 자동으로 코드를 최적화하고 최적화된 코드로 이미지를 빌드하도록 하였다.

javascript_optimize:
    @JS_FILES=$$(find $(TMP_ROOTFS_DIR)/wwwroot/js/ -name "*.js" 2> /dev/null); \
    for FILE in $$JS_FILES; do \
        echo "Optimizing $$FILE"; \
        uglifyjs "$$FILE" --compress -o "$$FILE.min"; \
        rm "$$FILE"; \
        mv "$$FILE.min" "$$FILE"; \
    done

작업 결과물은 자동으로 불필요한 공백과 주석을 제거해 주고, 코드를 거의 1줄로 만들어 주어서 코드의 크기를 꽤나 줄여 주었다.

물론 UglifyJS는 추가적으로 console log나 리팩토링 등의 기능들도 제공하므로, 원하면 추가적인 최적화도 할 수 있다.

그런데 UglifyJS로 최적화하는 시간이 생각보다 오래 걸려서, 위 동일 내용을 parallel job을 사용하도록 아래와 같이 수정하였다.

JS_FILES := $(shell find $(TMP_ROOTFS_DIR)/wwwroot/js/ -name "*.js" -not -name "*.min.js" 2> /dev/null)
javascript_optimize: $(JS_FILES:%=%.min)
%.min: %
    @echo $(GREEN)"Optimizing$(END_COLOR) $<"
    @uglifyjs "$<" --compress -o "$@" > /dev/null 2>&1
    @rm "$<"
    @mv "$@" "$<"

이렇게 하니 다중 코어를 사용하여 UglifyJS로 최적화하는 시간을 단축시킬 수 있었다.

맺음말

이번에 JavaScript로 기존 모델의 UI 버그도 수정하고 코드 크기 최적화도 수행해 보았다. 사실 나는 JavaScript는 사용할 일이 별로 없기에 나중에는 이것도 기억하지 못할 것이므로 여기에 간단히 기록을 남겨 보았다. 🍷

Twitter Facebook LinkedIn

Youngrok