압축을 적용하면 코드가 망가질 위험이 있나요?

Terser는 기본적으로 보수적으로 동작해 의미를 유지합니다. mangle은 외부로 노출되지 않은 변수만 바꾸고, compress는 안전이 보장되지 않는 변환은 건너뜁니다. Function.name에 의존하거나 소스를 eval하는 코드라면 해당 파일에서는 mangle을 끄세요.

보통 얼마나 크기가 줄어드나요?

JavaScript는 보통 40~70% 줄어듭니다. 주석이 길거나 변수명이 장황하고 사용되지 않는 분기가 많을수록 더 많이 줄고, 이미 짧거나 문자열 리터럴이 많은 코드는 덜 줄어듭니다. gzip을 거치면 차이는 더 좁아집니다.

minify, compress, mangle은 어떻게 다른가요?

minify는 묶음 용어입니다. compress는 상수 접기, 죽은 분기 제거 같은 코드 수준 변환을 수행하고, mangle은 식별자를 짧은 이름으로 바꿉니다. 세 가지를 따로 켜도 되고, 모두 켜면 보통 가장 작은 결과가 나옵니다.

서버에서 gzip이나 brotli를 쓰고 있어도 minify가 필요할까요?

필요합니다. gzip은 텍스트 중복을 줄여 줄 뿐, 긴 변수명을 바꾸거나 죽은 분기를 없애지 못합니다. minify된 코드는 gzip 후에도 더 작아지고 불러온 뒤 파싱도 빨라집니다. 두 단계는 중복이 아니라 누적입니다.

TypeScript나 ES2022 문법도 지원되나요?

순수 TypeScript는 Terser가 JavaScript만 받기 때문에 먼저 컴파일해야 합니다. ES2022까지의 최신 문법(프라이빗 필드, 최상위 await, 옵셔널 체이닝)은 Babel 변환 없이 바로 파싱됩니다.

JS 압축 도구

JavaScript 코드를 압축하여 파일 크기 줄이기

원본 크기

// Utility library — helper functions
(function () {
  "use strict";

/**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

// Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

// Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

console.log("Utilities loaded");

window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

// Utility library — helper functions
(function () {
  "use strict";

  /**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  // Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

  // Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

  console.log("Utilities loaded");

  window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

설정

예제대상 버전

변수 난독화압축console.log 제거클래스 이름 유지함수 이름 유지

Ctrl+Enter로 압축

JS 압축 도구이란?

JS Minifier는 Terser 엔진을 사용하여 공백과 주석을 제거하고 변수명을 단축해 JavaScript 코드를 압축합니다. 코드의 기능을 그대로 유지하면서 파일 크기를 줄여 페이지 로딩 속도를 높이고 대역폭 비용을 절감할 수 있습니다.

미니파이어는 로컬에서 Terser를 실행합니다. 공백과 주석을 없애고, mangle을 켜면 로컬 변수를 한 글자로 바꾸며, compress를 켜면 안전한 AST 변환을 적용하고, console.log 호출도 제거할 수 있습니다. 도구는 원본 크기, 압축 후 크기, 절감률을 보여 주어 배포 전에 효과를 확인할 수 있습니다.

사용 방법

입력 에디터에 JavaScript 코드를 붙여 넣거나 .js 파일을 업로드합니다.
압축 옵션을 선택합니다: 맹글링(변수명 단축), 압축, console.log 제거 여부를 설정합니다.
압축 버튼을 클릭하여 코드를 처리합니다. 크기 감소율을 확인하고 압축된 파일을 다운로드하거나 클립보드에 복사합니다.

사용 시기

별도 빌드 단계가 없는 CDN에 올리기 전 JavaScript 번들을 압축할 때.
CMS 테마에 붙여 넣기 전 외부 라이브러리에서 주석과 console 문을 제거할 때.
채팅 위젯, 광고 픽셀, 외부 스크립트 태그용으로 일회성 압축본을 만들 때.

결과

광범위한 주석과 긴 변수명을 가진 45KB 유틸리티 라이브러리가 있습니다. 붙여 넣고 맹글링과 압축을 활성화하면 12KB 결과물을 얻을 수 있습니다. 73% 감소된 결과물로 프로덕션 배포 준비가 완료됩니다.

자주 묻는 질문

압축을 적용하면 코드가 망가질 위험이 있나요?: Terser는 기본적으로 보수적으로 동작해 의미를 유지합니다. mangle은 외부로 노출되지 않은 변수만 바꾸고, compress는 안전이 보장되지 않는 변환은 건너뜁니다. Function.name에 의존하거나 소스를 eval하는 코드라면 해당 파일에서는 mangle을 끄세요.
보통 얼마나 크기가 줄어드나요?: JavaScript는 보통 40~70% 줄어듭니다. 주석이 길거나 변수명이 장황하고 사용되지 않는 분기가 많을수록 더 많이 줄고, 이미 짧거나 문자열 리터럴이 많은 코드는 덜 줄어듭니다. gzip을 거치면 차이는 더 좁아집니다.
minify, compress, mangle은 어떻게 다른가요?: minify는 묶음 용어입니다. compress는 상수 접기, 죽은 분기 제거 같은 코드 수준 변환을 수행하고, mangle은 식별자를 짧은 이름으로 바꿉니다. 세 가지를 따로 켜도 되고, 모두 켜면 보통 가장 작은 결과가 나옵니다.
서버에서 gzip이나 brotli를 쓰고 있어도 minify가 필요할까요?: 필요합니다. gzip은 텍스트 중복을 줄여 줄 뿐, 긴 변수명을 바꾸거나 죽은 분기를 없애지 못합니다. minify된 코드는 gzip 후에도 더 작아지고 불러온 뒤 파싱도 빨라집니다. 두 단계는 중복이 아니라 누적입니다.
TypeScript나 ES2022 문법도 지원되나요?: 순수 TypeScript는 Terser가 JavaScript만 받기 때문에 먼저 컴파일해야 합니다. ES2022까지의 최신 문법(프라이빗 필드, 최상위 await, 옵셔널 체이닝)은 Babel 변환 없이 바로 파싱됩니다.

JS 압축 도구

원본 크기

설정

JS 압축 도구이란?

사용 방법

사용 시기

결과

자주 묻는 질문

관련 도구

구조화 데이터 생성기

웹페이지를 PDF로

개인정보처리방침 생성기

이용약관 생성기

쿠키 동의 배너 생성기

CSS 압축 도구

JS 압축 도구

원본 크기

설정