웹소스 보다보면 css, js 파일 내용을 쉽게 볼수 없을 정도로 한줄로 쭉 압축 해놓은 것

확장자에 min 이 붙는데요.

이런 작업은 어떻게 하고 무엇이라고 하나요?

2 답변

0 투표

압축과 난독화

일반적으로 서비스에서 공통으로 사용되는 주요 소스 코드들은 별도의 파일로 분리하여 사용한다. 
이렇게 관리할 경우 코드의 재사용, 캐시 적용, CDN 사용 등 여러 가지 장점이 있다.
그 중 코드 압축은 최소의 노력으로 큰 효과를 볼 수 있는 최적화 방법 중 하나다. 
파일의 용량이 줄어들고 민감한 코드를 알아보기 어렵게 만들 수 있다.
경우에 따라서는 스크립트의 수행 속도에도 영향을 미치기도 하고 설정에 따라 압축한 소스로도 디버깅을 할 수 있도록 해주는 Source Maps 기능을 사용할 수도 있다.

압축(Minify)

코드 압축은 다음의 항목에 해당하는 코드들을 줄이는 행위를 말한다.

  • 불필요한 줄바꿈, 공백 밑 들여쓰기
  • 짧게 쓸 수 있는 긴 구문 (줄일 수 있는 if 구문, 형 변환 축약 등)
  • 스코프 내 사용하지 않는 변수
  • 주석
  • (경우에 따라서) console.log, debugger 등의 디버깅용 구문 또는 메서드 호출
  • (경우에 따라서) 무의미한 메서드 호출 및 루프

디버깅용 메서드 호출을 제거하는 기능은 옵션에 따라 적용이 가능하고, 무의미한 메서드 및 루프를 최적화하는 기능은 Google Closure Compiler를 사용하면 적용할 수 있다.

난독화(Uglify)

난독화는 자바스크립트 코드 자체를 분석하기 어렵게 만드는 과정이다. 
난독화의 방법에는 변수명, 함수명 치환에서부터 자바스크립트의 일부 루틴을 문자열로 바꿔 변수에 담고 뒤섞는 단계까지 여러 단계가 있다.
난독화의 단계를 높일수록 루틴을 알아보기 어렵게 만들 수 있다.

"못하게"가 아니고 "어렵게"이다.
즉, 난독화를 했다고 자바스크립트 코드가 완벽하게 숨겨진다는 뜻이 아니다.
난독화만 믿고 별도의 보안 처리 없이 중요 정보나 루틴을 자바스크립트에 넣는 것은 매우 위험하다.

변수명, 함수명 치환 정도 단계는 원본과 비교하여 해석 및 실행 속도에서 차이가 나지 않는다. 
변수, 함수명 등이 줄어 용량이 감소하지만 난독화 단계를 높일수록 코드를 해석하고 실행하는 속도가 느려질 수 있으므로, 프로젝트에 맞게 선택하여 적용하는 것이 좋다.

0 투표

압축 도구

보통 압축 도구들은 코드 압축과 난독화를 기본적으로 지원하고 있다.
CLI(Command Line Interface) 형태의 바이너리가 제공되며, 다른 인자 없이 스크립트를 인자로 넘길 경우 압축과 난독화를 동시에 진행한다.
프로젝트의 상황에 따라 압축 또는 난독화의 정도를 조절하는 등의 세부사항을 조절할 필요가 있다.
여기서는 각 도구가 제공하는 특징을 위주로 소개한다.

Google Closure Compiler

Google Closure Compiler는 별도의 API를 이용하여 소스를 압축하거나, jar 파일을 다운받아 사용할 수 있다.
가장 큰 특징은 Google JavaScript Style Guide에 맞춰 개발했을 때 코드 최적화를 해 준다는 점이다.
추가로 Style Guide에 맞도록 코드를 변환해주는 Style Fixer도 제공하고 있다.
공식 사이트에서 jar 파일을 받고 커맨드라인 명령을 통해 아래와 같이 사용할 수 있다.

java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

UglifyJS

UglifyJS는 현재 주요 자바스크립트 라이브러리에서 가장 많이 쓰이는 소스 압축 도구다.
Node.js 기반으로 개발되어 다른 Node.js 모듈들과의 연계가 좋다.
약간의 코드 최적화 기능이 있고 Google Closure Compiler보다 방대한 양의 상세 옵션을 제공한다.
npm을 통해 설치할 수 있다.

npm install -g uglify-js

설치와 마찬가지로 커맨드라인 명령을 통해 아래와 같이 사용할 수 있다.

uglifyjs hello.js -o hello.min.js
구로역 맛집 시흥동 맛집
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
add
...