Minify, Uglify 입문

입문하게 된 이유

- 초기 로딩 관련해서 찾아보다가 발견하여 입문

 

1. Minify

경량화 또는 압축이라 불리는데 경량화가 더 맞다 생각이 듬

 

- 코드 내에서 사용하지 않는 변수명, 불필요한 줄바꿈이나 공백, 들여쓰기 등을 삭제

- 줄여서 사용할 수 있는 긴 구문등을 축약해서 사용

// minify 작업 전
function minify() {

console.log('minify');

var a = 'test';

if(true) {
	console.log('true');
}else {
	console.log('false');
}

}

 

// minify 작업 후
function minify(){console.log('minify');console.log('true');}
// 사용하지 않는 변수명도 삭제

 

위 설명처럼 경량화를 시켜줘서 최종 번들 크기를 줄여줌

 

쉽게 확인이 가능한 사이트

https://skalman.github.io/UglifyJS-online/

UglifyJS 3: Online JavaScript minifier

 

 

2. Uglify

단어만 보면 추하게 하다 이런 뜻으로 번역기에 나오는데 유추를 해보자면 코드를 추하게 만든다?

 

근데 검색을 좀 해보면 코드 난독화라고 구글 첫 페이지부터 쫙 깔려있음

 

근데 코드 난독화? 이걸 왜 씀?

 

개발자 도구로 소스를 확인이 가능한 상황이다 보니 민감한 소스는 가독성이 떨어지게 변환 시켜줌

 

장점

 

• 코드 보호: 소스 코드를 보호하여 다른 사람이 코드를 이해하거나 무단으로 사용하는 것을 어렵게 만듬
• 스크립트 공격 방지: 난독화는 공격자가 악성 코드를 삽입하거나 기존 코드를 변조하는 것을 어렵게 만듬

 

단점

 

• 디버깅 어려움: 난독화가 되어있다보니 실제 해당 사이트의 개발자도 브라우저 디버깅을 어려워 하게 됨
• 완벽한 보안은 아님: 위 장점들에 따라 어렵게 만들기만 하지 완전 불가가 아님

 

// uglify 변환 전
function calculateTax(income) {
    const taxRate = 0.15;
    return income * taxRate;
}

 

// uglify 적용 후
function a(b){const c=0.15;return b*c;}

 

주로 uglify 관련해서 node에 uglify-js 사용하면 쉽게 적용 가능함

https://www.npmjs.com/package/uglify-js

uglify-js

 

3. 테스트

customize.min.js라는 파일이 있는데 이걸 변환시켜봤더니

 

 

656KB > 463KB로 약 30% 감소했다.

cmd 명령어로 먼저 작업을 했었다.

해당 dir로 이동 후

uglifyjs customize.min.js -o uglify.customize.min.js --compress --mangle

 

 

• --compress: 코드를 압축
• --mangle: 변수 및 함수명을 난독화

추가적인 옵션은 위 링크에서 확인하자

 

옵션 없이 그냥 명령어만 진행시 용량 차이가 난다.

 

 

4. 결론

UglifyJS는 코드 크기를 줄이고 난독화를 통해 보안을 강화하며 웹 애플리케이션 성능을 최적화하는 데 유용한 도구이다. 하지만 난독화와 압축은 개발 중이 아닌, 최종 배포 단계에서만 사용하는 것이 적합

 

그리고 요새 React, Vue, Angular에는 다 사용 한다고 함

우리 회사는 사용을 안하니... 나는 pom.xml 수정해서 혼자 써야겠다..

 

 

참고 

 - https://velog.io/@june_summer/Minify%EC%99%80-Uglify%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

Minify와 Uglify에 대해 알아보자.

- https://mmxvi.tistory.com/62

[정보보안] javascript 난독화 Uglify.JS