JavaScript & CSS 압축기

기능 소개

압축(minify)은 브라우저가 코드를 실행하는 데 필요 없는 공백, 줄바꿈, 주석, 긴 이름을 모두 제거합니다. 파일이 작을수록 더 빨리 다운로드되므로, 특히 모바일 네트워크에서 페이지 로드 시간과 Core Web Vitals가 개선됩니다.

이 도구는 JavaScript를 webpack, Rollup, Vite가 사용하는 압축기인 Terser로, CSS를 CSSO로 압축합니다. CSSO는 스타일시트 구조도 재정리합니다. 색상을 줄이고(#ffffff를 #fff로), 불필요한 단위와 값을 없애고(0px 0px를 0으로), 선택자나 선언이 같은 규칙을 병합합니다.

사용 방법

1. 입력 상자에 코드를 붙여넣거나 .js 또는 .css 파일을 끌어다 놓거나 예시를 클릭합니다.
2. JavaScript 또는 CSS를 선택합니다.
3. JavaScript에서 변수 이름 줄이기는 지역 변수와 매개변수 이름을 한 글자로 바꿉니다. export된 이름과 전역 이름은 절대 바꾸지 않습니다.
4. CSS에서 중복 규칙 병합은 선언이 같은 규칙을 하나로 합칩니다.
5. 결과를 복사하거나 다운로드합니다. 각 상자 아래의 크기 카운터로 얼마나 줄었는지 확인할 수 있습니다.

JavaScript에 문법 오류가 있으면 오류 메시지에 줄과 열이 표시되므로 바로 해당 위치로 이동할 수 있습니다.

예시

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

변환 결과:

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

언제 사용하나요

CDN에 올릴 코드 조각, HTML 이메일의 인라인 스크립트, 북마클릿처럼 일회성 작업이 필요하거나, 라이브러리가 얼마나 작아질 수 있는지 확인할 때 사용하세요. 실제 프로젝트에서는 소스를 읽기 쉽게 유지할 수 있도록 번들러가 빌드할 때마다 압축하게 하는 것이 좋습니다.