Minification — 정의, minification 원리 및 코드 도구

Minification이란?

Minification은 프로그램 실행에 영향을 주지 않는 모든 문자를 제거하는 소스 코드의 자동 변환입니다. 공백, 탭, 줄바꿈 문자, 주석 및 중복 괄호가 제거되거나 단축됩니다. Minification은 프로덕션에 배포하기 전에 JavaScript, CSS, HTML 및 드물게 JSON 구성에 적용됩니다.

Minification의 주요 목표는 네트워크를 통해 전송되는 파일 크기를 줄이는 것입니다. Minification 후 300KB JavaScript 파일은 120~150KB를 차지할 수 있으며, 느린 3G 연결에서 로딩 시간을 200~400ms 단축합니다. Google PageSpeed Insights와 Lighthouse는 코드 minification을 직접 권장합니다. 이는 성능 평가 및 Core Web Vitals의 기준 중 하나입니다.

Minification은 빌드 파이프라인의 필수적인 부분입니다. TypeScript 또는 Babel로 트랜스파일한 후, 코드는 Tree Shaking(사용하지 않는 함수 제거)을 거친 다음 minifier를 거친 후 최종 번들로 조립됩니다. 최신 번들러(Webpack, Rollup, esbuild)에서 minification은 빌드의 최종 단계에서 플러그인에 의해 수행됩니다.

Minification이 제거하는 것

Minification 작동 방식: 주요 기술

공백 및 줄바꿈 제거는 가장 간단하고 명백한 기술입니다. minifier 파서는 AST(추상 구문 트리)를 통과하며 문자열 리터럴의 일부가 아닌 모든 공백 문자를 제거합니다. 대부분의 minifier는 추가로 연산자를 한 줄로 결합하여 GZip 또는 Brotli로 압축할 때 추가 절감 효과를 제공합니다.

변수 이름 바꾸기(mangling)는 더 적극적인 기술입니다. 지역 변수와 함수 매개변수가 한 글자 식별자(a, b, c)로 이름이 변경됩니다. 이렇게 하면 크기가 추가로 15~30% 줄어듭니다. Terser와 esbuild는 특정 이름(예: mangle.props.reserved를 통한 공개 API)을 유지하는 옵션과 함께 mangling을 지원합니다.

데드 코드 제거

데드 코드 제거(DCE)는 절대 실행되지 않는 코드 분기를 제거합니다. minifier는 항상 false인 조건(if (false))을 분석하고 해당 블록을 제거합니다. 더 고급 분석은 minification 전 Tree Shaking 단계에서 수행되지만, minifier 수준의 DCE는 모듈 수준에서 감지되지 않은 로컬 데드 코드 사례를 잡아냅니다.

변수 이름 맹글링

Mangling은 지역 변수와 함수 매개변수를 짧은 식별자(1~2글자)로 이름을 변경합니다. Terser는 범위에 기반하여 mangling을 수행합니다. 하나의 함수 내 변수는 외부 범위와 충돌하지 않는 고유한 짧은 이름을 얻습니다. mangle.reserved 옵션을 사용하면 특정 이름(예: 공개 라이브러리 API)을 유지할 수 있습니다.

Mangling은 전역 변수, 객체 속성(mangle.props가 활성화되지 않은 경우) 또는 new와 함께 사용되는 클래스 이름에는 영향을 미치지 않습니다. 맹글링으로부터 라이브러리의 공개 API를 보호하려면 정규식과 함께 mangle.props.reserved를 사용하세요: reserved: ["_prop", /^private_/]. 이 설정이 없으면 외부 코드가 이름으로 객체 속성에 접근할 경우 mangling이 라이브러리를 손상시킬 수 있습니다.

예: Minification 전후

// 소스 코드
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // 총 합계 반환
    return result;
}

var total = calculateTotal(100, 0.2);
console.log(total);

// Terser minification 후
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

두 번째 예에서 Terser는 주석, 공백 및 줄바꿈을 제거하고 price를 a로, tax를 b로, result를 c로 이름을 변경했습니다. 크기가 197자에서 79자로 60% 절감되었습니다. 동시에 코드 기능은 완전히 유지됩니다: calculateTotal(100, 0.2)는 120을 반환합니다.

Minification 도구: Terser, esbuild, UglifyJS

Terser는 Webpack 생태계 및 대부분의 최신 번들러에서 표준 JavaScript minifier입니다. Terser는 ES6+ 구문(화살표 함수, async/await, spread), 공개 API 보호 기능이 있는 mangling, source map 및 CPU 수에 따른 병렬 실행을 지원합니다. 버전 5.16부터 Terser에는 TypeScript 최적화(타입 전용 가져오기 및 인터페이스 제거)가 포함됩니다.

esbuild는 Go로 작성된 minifier로, 동일한 이름의 번들러에 내장되어 있습니다. esbuild는 네이티브 코드와 병렬 처리 덕분에 Terser보다 10~100배 빠르게 minification을 수행합니다. 그러나 esbuild는 더 적은 최적화를 지원합니다: 속성 유지와 함께 mangling을 수행하지 않고, 타입 전용 가져오기를 제거하지 않으며, 표현식을 덜 적극적으로 최적화합니다.

Webpack에서 Terser 구성

// webpack.config.js — TerserPlugin 구성
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            dead_code: true,
          },
          mangle: {
            reserved: ["React", "Component"],
          },
          output: {
            comments: false,
          },
        },
        parallel: true,
      }),
    ],
  },
};

TerserPlugin 구성에는 세 가지 주요 블록이 포함됩니다. compress는 표현식 최적화를 처리합니다: drop_console은 console.log를 제거하고, drop_debugger는 debugger를 제거하고, dead_code는 도달할 수 없는 분기를 제거합니다. mangle은 공개 이름을 보호하기 위해 reserved와 함께 변수 이름 바꾸기를 제어합니다. parallel은 CPU 수에 따른 멀티스레딩을 활성화합니다.

esbuild로 CSS Minification

// esbuild: JS 및 CSS minification을 위한 CLI 명령
// esbuild app.js --bundle --minify --outfile=dist/app.min.js
// esbuild app.css --bundle --minify --outfile=dist/app.min.css

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: ["src/app.js", "src/styles.css"],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ["es2015"],
  outdir: "dist",
}).catch(() => process.exit(1));

esbuild API는 한 줄 구성을 허용합니다. minify: true는 JS와 CSS 모두의 minification을 활성화합니다. sourcemap: true는 디버깅을 위한 코드 맵을 생성합니다. target은 최소 ES 수준을 정의합니다 — esbuild는 선택한 버전에 맞게 최신 코드를 자동으로 트랜스파일합니다. esbuild는 빌드 시간이 중요한 프로젝트(CI/CD 파이프라인, Hot Module Replacement, 빠른 프로토타입)에 특히 효과적입니다.

React Native 및 WebView에서의 Minification

React Native는 Metro Bundler를 사용합니다 — Terser 기반 minification을 포함하는 자체 번들러입니다. 프로덕션 모드에서 Metro는 애플리케이션의 JavaScript 번들에 자동으로 minification을 적용합니다. Metro의 minification 구성은 transformer.minifierConfig 섹션의 metro.config.js를 통해 설정됩니다. 또한 iOS에서 번들 크기를 줄이기 위해 inline-require를 비활성화할 수 있습니다.

모바일 애플리케이션의 WebView도 minification의 이점을 누립니다. WebView에서 로드되는 HTML, CSS 및 JS는 애플리케이션에 포함되거나 서버에서 로드되기 전에 minify되어야 합니다. 로컬 리소스(Assets)의 경우 minification이 특히 중요합니다 — APK/IPA 크기는 앱 스토어에서 설치 전환율에 직접적인 영향을 미칩니다.

Hermes와 Minification

Hermes는 Facebook이 개발한 React Native용 JavaScript 엔진입니다. Hermes는 AOT(Ahead-of-Time) 바이트코드 컴파일을 수행하여 애플리케이션 시작 시간을 30~50% 단축합니다. Hermes의 경우 JavaScript 번들 minification은 Terser를 사용하여 바이트코드 컴파일 전에 수행됩니다. Hermes는 자체 HBC(Hermes Bytecode) 형식을 지원하지만 JS minification 단계는 여전히 필요합니다.

React Native용 Metro 구성

// metro.config.js — minification 구성
const defaultConfig = require("metro-config/src/defaults");

module.exports = require("metro-config").mergeConfig(
  defaultConfig,
  {
    transformer: {
      minifierConfig: {
        compress: {
          drop_console: true,
        },
        mangle: {
          safari10: true,
        },
      },
    },
  }
);

Metro는 minifierConfig.drop_console을 사용하여 React Native 프로덕션 번들에서 모든 console.log를 제거합니다. mangle.safari10 매개변수는 Safari 10(iOS 10)을 손상시키는 식별자의 이름 변경을 방지합니다. 이는 iOS 10/11이 설치된 구형 iPad 및 iPhone 5s 기기를 지원하는 애플리케이션에 특히 중요합니다.

Minification과 압축의 차이점

Minification과 압축(gzip, brotli)은 다른 최적화 단계입니다. Minification은 소스 코드 수준에서 작동하며 서버로 보내기 전에 문자 수를 줄입니다. 압축은 전송 프로토콜 수준에서 작동하며 클라이언트에게 파일을 전송할 때 서버(nginx, Apache, CDN)에 의해 적용됩니다. Minification은 압축 전에 크기를 줄여 이중 효과를 제공합니다: gzip은 이미 줄어든 데이터를 압축합니다.

Minification 후 300KB JavaScript 파일 — 120KB, gzip 후 — 35~40KB. minify되지 않은 파일에만 gzip을 적용하면 크기가 55~70KB가 됩니다. Minification + gzip은 gzip 단독보다 30~40% 더 나은 결과를 제공합니다. Brotli(레벨 6)는 minification 후 gzip보다 추가로 15~20% 더 효율적으로 압축합니다.