JS/CSS 압축기

이 도구가 유용했나요? 댓글을 남기거나 팁을 공유하거나 개선할 점을 알려주세요.

이 도구의 기능

읽기 쉬운 JavaScript나 CSS를 붙여넣으면, 이 도구가 공백과 주석을 제거하고 (JavaScript의 경우 선택적으로) 지역 변수 이름을 축소하여 동작은 동일하지만 더 작은 파일을 생성합니다.

작동 방식

이 도구는 JavaScript에는 오픈소스 terser 엔진을, CSS에는 clean-css를 사용하여 코드를 추상 구문 트리로 분석한 다음, 그 트리에서 가장 간결한 동등 소스를 다시 생성합니다. 주석과 불필요한 공백을 제거하고, 안전한 경우 숫자와 색상 값을 축소하며, mangle이 활성화된 JavaScript의 경우 지역 범위 식별자를 사용 가능한 가장 짧은 이름으로 변경합니다. 이 변환은 원본 텍스트가 아니라 분석된 구조에서 작동하므로, 결과 코드는 원본과 동일하게 동작합니다.

해결하는 문제

• 빌드 파이프라인 없이 수동으로 배포하기 전에 특히 유용하게, JavaScript나 CSS 파일 크기를 줄여 페이지 로드 속도를 높이기.
• 완전한 빌드 도구를 설정하지 않고 단일 스크립트나 스타일시트에서 프로덕션에 바로 사용할 수 있는 번들을 빠르게 생성하기.
• 정확한 전후 크기 비교를 통해 파일이 얼마나 작아졌는지 정확히 확인하기.

자주 묻는 질문