웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트 파일을 압축해주는 uglifyjs 라이브러리는 꽤 유명합니다. 워낙 예전부터 유명한 자바스크립트 압축 유틸리티로 js 파일을 압축해 크기를 줄일 수 있는 방법이죠.
! uglifsjs는?
압축(Compress)으로 잘 알려져 있지만 Parcer, Minifier, Beautifier로서의 기능도 있습니다. 그럼 아래는 uglifyjs를 설치하고 사용하는 방법에 대하여 자세히 알아보겠습니다.
# 자바스크립트 라이브러리 uglifyjs
먼저 설치하는 방법을 알아봅니다. 간단하게 npm을 사용해 설치가 가능합니다.
여기서 -g 옵션을 사용하면 글로벌로 설정되어 cli 커맨드라인 명령어가 가능하게 됩니다. 이제 node 패키지를 사용해 설치가 완료되었습니다.
! uglifyjs 사용방법 알아보기
사용 방법도 아주 간단한데요~ 먼저 가장 기본적인 방법부터 알아봅니다.
uglifyjs <파일> <옵션값>
이처럼 대상파일과 옵션을 사용해 손쉽게 사용 할 수 있습니다. 선택 가능한 옵션부터 알아보죠.
--output, -o // 출력결과를 파일로 저장하기
--compress, -c // 압축하기
위 두 옵션이 가장 많이 쓰이는 옵션 중 하나입니다. 여기서 output 옵션을 사용하지 않으면 파일로 저장하지 않고 압축된 내용을 그대로 문자열로 반환합니다. 그래서 파일로 저장할 경우 꼭 --output을 사용해야하니 알아두시기 바랍니다. 아래는 그 외의 옵션들입니다.
--parse, -p // 파싱을 수행함
--mangle, -m // Mangle을 수행함; (Mangle v. 짓이기다, 훼손하다)
--beautify, -b // Beautify를 수행함
--timings // 런타임 시간을 반환
--version // 현재 버전 출력하기
# uglifyjs 예제 및 사용 방법
이제 예제 및 사용 방법을 알아봅니다. 옵션 없이 아래처럼 사용합니다.
@ 파일로 출력하기 --output
코드를 실행하면 test.min.js 파일이 생성되되고 저장됩니다.
! mangle 및 compress 사용하기
가장 많이 사용되는 옵션인 output과 함께 사용되는 mangle, compress 사용 방법입니다.
옵션의 위치를 잘 확인하고 사용해야 합니다.
! 각각의 옵션의 출력값 보기
아래와 같은 test.js가 실제 어떻게 동작되어 결과가 나타나는지 알아봅니다.
@ test.js
각각 알아봅니다. 먼저 옵션이 없는 경우 부터 확인해보죠.
1. 옵션 사용 없음
2. 압축하기 -- compress
3. Mangle --mangle
4. Beautify 하기 --beautify
4. 런타임 확인하기 --timings
동작 시간이 각각 옵션별로 출력됩니다. 다음은 ES 6를 지원하는 방법입니다.
# es6를 지원하는 uglify-js-6
앞에 말한 것 처럼 기존 라이브러리는 es6 문법을 지원하지 않습니다. Webpack 등의 번들링 환경에 babel을 설정하지 않았다면 js 내부에 const, let 등등 es6가 사용된 경우 uglify-js에서 에러가 발생하죠.
하지만 새로운 노드 패키지인 uglify-js-es6는 es6를 지원하기 때문에 es6 문법도 사용 가능합니다. 아래는 링크입니다.
링크 바로가기 >
https://www.npmjs.com/package/uglify-js-es6
이제 ES 6 역시 uglifyjs를 사용해 압축 등의 기능을 쉽게 이용할 수 있습니다.
! uglifsjs는?
압축(Compress)으로 잘 알려져 있지만 Parcer, Minifier, Beautifier로서의 기능도 있습니다. 그럼 아래는 uglifyjs를 설치하고 사용하는 방법에 대하여 자세히 알아보겠습니다.# 자바스크립트 라이브러리 uglifyjs
먼저 설치하는 방법을 알아봅니다. 간단하게 npm을 사용해 설치가 가능합니다.npm install uglify-js -g
여기서 -g 옵션을 사용하면 글로벌로 설정되어 cli 커맨드라인 명령어가 가능하게 됩니다. 이제 node 패키지를 사용해 설치가 완료되었습니다.
! uglifyjs 사용방법 알아보기
사용 방법도 아주 간단한데요~ 먼저 가장 기본적인 방법부터 알아봅니다.uglifyjs <파일> <옵션값>
이처럼 대상파일과 옵션을 사용해 손쉽게 사용 할 수 있습니다. 선택 가능한 옵션부터 알아보죠.
--output, -o // 출력결과를 파일로 저장하기
--compress, -c // 압축하기
위 두 옵션이 가장 많이 쓰이는 옵션 중 하나입니다. 여기서 output 옵션을 사용하지 않으면 파일로 저장하지 않고 압축된 내용을 그대로 문자열로 반환합니다. 그래서 파일로 저장할 경우 꼭 --output을 사용해야하니 알아두시기 바랍니다. 아래는 그 외의 옵션들입니다.
--parse, -p // 파싱을 수행함
--mangle, -m // Mangle을 수행함; (Mangle v. 짓이기다, 훼손하다)
--beautify, -b // Beautify를 수행함
--timings // 런타임 시간을 반환
--version // 현재 버전 출력하기
# uglifyjs 예제 및 사용 방법
이제 예제 및 사용 방법을 알아봅니다. 옵션 없이 아래처럼 사용합니다.uglifyjs test.js
@ 파일로 출력하기 --output
uglifyjs test.js --output test.min.js
or
uglifyjs test.js -o test.min.js
or
uglifyjs test.js -o test.min.js
코드를 실행하면 test.min.js 파일이 생성되되고 저장됩니다.
! mangle 및 compress 사용하기
가장 많이 사용되는 옵션인 output과 함께 사용되는 mangle, compress 사용 방법입니다.uglifyjs test.js -o test.min.js -c
// compress만 사용
uglifyjs test.js -o test.min.js -m
// mangle만 사용
uglifyjs test.js -o test.min.js -c -m
// compress와 mangle 동시 사용
// compress만 사용
uglifyjs test.js -o test.min.js -m
// mangle만 사용
uglifyjs test.js -o test.min.js -c -m
// compress와 mangle 동시 사용
옵션의 위치를 잘 확인하고 사용해야 합니다.
! 각각의 옵션의 출력값 보기
아래와 같은 test.js가 실제 어떻게 동작되어 결과가 나타나는지 알아봅니다.@ test.js
!function test() {
var msg = 123;
console.log(msg);
}();
var msg = 123;
console.log(msg);
}();
각각 알아봅니다. 먼저 옵션이 없는 경우 부터 확인해보죠.
1. 옵션 사용 없음
!function test(){var msg=123;console.log(msg)}();
; 빈 공간이 사라지고 줄바꿈 없이 제거되었습니다.2. 압축하기 -- compress
console.log(123);
; 불필요한 함수가 사라지고 결과만 동일하도록 압축됩니다.3. Mangle --mangle
!function o(){var n=123;console.log(n)}();
; 1번과 동시에 긴 변수명도 짧게 줄어들었군요.4. Beautify 하기 --beautify
!function test() {
var msg = 123;
console.log(msg);
}();
; 불필요한 공백이 사라지고 이쁘게(?) 출력됩니다.var msg = 123;
console.log(msg);
}();
4. 런타임 확인하기 --timings
!function test(){var msg=123;console.log(msg)}();
- parse: 0.004s
- rename: 0.000s
- compress: 0.000s
- scope: 0.000s
- mangle: 0.000s
- properties: 0.000s
- output: 0.002s
- total: 0.006s
- parse: 0.004s
- rename: 0.000s
- compress: 0.000s
- scope: 0.000s
- mangle: 0.000s
- properties: 0.000s
- output: 0.002s
- total: 0.006s
동작 시간이 각각 옵션별로 출력됩니다. 다음은 ES 6를 지원하는 방법입니다.
# es6를 지원하는 uglify-js-6
앞에 말한 것 처럼 기존 라이브러리는 es6 문법을 지원하지 않습니다. Webpack 등의 번들링 환경에 babel을 설정하지 않았다면 js 내부에 const, let 등등 es6가 사용된 경우 uglify-js에서 에러가 발생하죠.하지만 새로운 노드 패키지인 uglify-js-es6는 es6를 지원하기 때문에 es6 문법도 사용 가능합니다. 아래는 링크입니다.
링크 바로가기 >
https://www.npmjs.com/package/uglify-js-es6
이제 ES 6 역시 uglifyjs를 사용해 압축 등의 기능을 쉽게 이용할 수 있습니다.
아래의 글도 찾고 계시지 않나요?
