CSS·JS 압축기

gzip 을 이미 켰다면 minify 효과는 줄어듭니다

정직하게 말하면 이렇습니다. minify 가 지우는 것은 대부분 반복되는 공백과 줄바꿈인데, 그건 gzip·brotli 가 가장 잘 압축하는 패턴입니다. 이미 반복 패턴을 몇 바이트로 줄여 놓는 압축기 입장에서, 그 반복을 미리 지워 준다고 크게 달라지지 않습니다.

경향은 대략 이렇습니다 — 원본 대비 raw 절감이 30%라 해도, gzip 을 통과한 뒤의 절감폭은 그보다 훨씬 작아지는 것이 보통입니다. 그래서 "minify 했더니 30% 줄었다"를 실제 전송량 개선으로 착각하면 안 됩니다.

이 도구의 통계에 "결과 gzip 후" 크기를 넣어 둔 이유가 그것입니다. 그 숫자가 실제로 네트워크를 타는 크기에 가깝습니다. 원본을 그대로 한 번 넣어 gzip 크기를 재 보고, 압축한 결과의 gzip 크기와 비교해 보세요. 차이가 몇 KB 안 된다면 minify 는 전송량보다는 소스를 덜 노출하는 정도의 의미입니다.

이 도구로 충분한 경우 · 빌드 도구로 가야 하는 경우

이 도구는 공백·주석 제거 수준의 안전한 압축만 합니다. 변수명 축약(mangling), 죽은 코드 제거, 속성 병합 같은 고급 최적화는 하지 않습니다. 절감률이 전용 도구보다 낮은 것은 기능이 부족해서가 아니라, 자체 파서로 이름을 바꾸는 순간 동적 참조가 있는 코드가 조용히 깨지기 때문에 안 하는 쪽을 택한 것입니다.

CSS 압축에서 조심할 것

색상·0 축약 옵션을 켜면 여섯 자리 색상값이 세 자리로, 0.5em 이 .5em 으로 줄어듭니다. 여기에 함정이 몇 개 있습니다.

• #abcdef 가 색상값인지 ID 선택자인지 구분해야 합니다. 이 도구는 속성값 자리에서만 축약하므로 같은 문자열이 선택자로 쓰인 곳은 건드리지 않습니다.
• calc() 안의 공백은 의미가 있습니다. calc(100% - 20px) 에서 마이너스 양옆 공백을 지우면 계산이 아예 안 됩니다. 이 도구는 calc() 안을 건드리지 않습니다.
• 느낌표로 시작하는 주석과 @license 주석은 "보존" 옵션이 켜져 있으면 남습니다. 오픈소스 라이브러리를 압축할 때는 반드시 켜 두세요. 라이선스 고지를 지우면 라이선스 위반입니다.
• 축약 결과를 못 알아보게 됐다면 "정렬(CSS)"로 되돌릴 수 있습니다. 다만 주석은 이미 지워졌으므로 돌아오지 않습니다. 원본은 따로 보관하세요.

JS 압축 — 왜 줄바꿈이 다 안 지워지나

자바스크립트에는 세미콜론 자동 삽입(ASI)이 있습니다. 줄바꿈이 세미콜론 역할을 하는 경우가 있다는 뜻입니다. 그래서 줄을 무작정 다 붙이면 코드의 동작이 바뀝니다.

• 이 도구는 쉼표·연산자·여는 괄호처럼 문장이 이어질 수밖에 없는 자리의 줄바꿈만 없애고, 나머지는 남깁니다. 그래서 결과가 완전한 한 줄이 되지는 않습니다.
• 슬래시가 나눗셈인지 정규식인지 판단이 서지 않는 드문 경우에는 압축을 중단하고 원본을 그대로 둔 뒤 이유를 알려 줍니다. 결과가 안 줄었다면 그 이유일 수 있습니다.
• 압축 후에는 결과를 브라우저 파서로 다시 검사합니다. 문법이 깨졌으면 결과를 내보내지 않습니다.

// return 뒤의 줄바꿈이 세미콜론으로 해석되어 undefined 를 반환한다
function f() {
  return
  { ok: true }
}

// 반대로 이 줄바꿈을 지우면 동작이 바뀐다
var a = b
(function(){})()   // 붙이면 b(function…) 호출이 된다

압축했더니 깨졌을 때

1. 먼저 원본이 원래 깨져 있었는지 확인합니다. 이 도구는 결과를 브라우저 파서로 검사하므로, 오류가 났다면 원본에 이미 문법 문제가 있었을 가능성이 높습니다.
2. 언어 자동 감지가 틀렸는지 봅니다. CSS-in-JS 나 HTML 조각이 섞인 파일은 감지가 어긋날 수 있습니다. CSS·JS 탭을 직접 골라 다시 해 보세요.
3. 여러 파일을 이어붙여 넣었다면 하나씩 나눠서 넣어 보세요. 어느 파일이 문제인지 바로 좁혀집니다.
4. @license 나 webpackChunkName 같은 지시어가 지워졌는지 봅니다. 주석 보존 옵션을 켜세요.
5. 그래도 안 되면 이 도구로 압축하지 마세요. 빌드 도구를 붙일 때입니다. 덜 압축된 채로 돌아가는 코드가, 압축돼서 깨진 코드보다 낫습니다.