프론트엔드 번들 경량화: AST 기반 코드 압축(Minify)과 Tree-shaking

웹 페이지를 구성하는 리소스 중 자바스크립트는 바이트당 비용이 가장 비싼 자원입니다. 이미지는 단순히 다운로드되어 디코딩만 거치면 렌더링되지만, 자바스크립트는 네트워크 다운로드 후 모바일 기기의 메인 스레드 CPU에서 압축 해제, 어휘 분석, AST 파싱, 바이트코드 컴파일, 실행 단계를 모두 거쳐야 합니다.

경량화되지 않은 대형 번들은 구글의 핵심 성능 지표인 FCP(First Contentful Paint), LCP(Largest Contentful Paint), 그리고 사용자 반응성을 측정하는 INP(Interaction to Next Paint)를 심각하게 저하시킵니다. 번들 압축을 통해 파일 크기를 40~70% 감축하면 브라우저 파싱 및 컴파일 지연이 대폭 단축됩니다.

최신 번들러 및 압축기(Terser, esbuild, SWC 등)는 단순 텍스트 정규식이 아닌 컴파일러 파이프라인을 통해 코드를 압축합니다:

1. 공백 및 주석 제거: 개발용 주석, 불필요한 개행과 인덴트를 모두 제거합니다.
2. 데드 코드 제거 (DCE, Dead Code Elimination): 실행될 가능성이 없는 조건 분기(if (false) { ... } 또는 if (process.env.NODE_ENV === 'development'))를 컴파일 단계에서 영구 삭제합니다.
3. 식별자 맹글링 (Mangling): 가독성을 위해 길게 지은 함수명과 변수명을 a, b, c 등 알파벳 단일 문자로 치환하여 반복 출현 바이트를 극적으로 축소합니다.

// 원본 소스 코드:
function calculateUserLoyaltyDiscount(customerProfile, hasPromotionalCoupon) {
    const baseDiscount = 1000;
    if (false) {
        console.log("실행되지 않는 디버깅 로그");
    }
    return hasPromotionalCoupon ? baseDiscount * 1.2 : baseDiscount;
}

// 컴파일 및 맹글링 압축 결과:
function a(b,c){return c?1200:1000}

미니피케이션이 파일 내부의 바이트를 줄인다면, 트리셰이킹은 외부 라이브러리에서 실제로 쓰이지 않는 함수 전체를 번들에서 통째로 털어내는 기법입니다:

• ES 모듈 (ESM, import/export): 정적(Static) 구조를 가집니다. 빌드 타임에 어떤 모듈의 어떤 함수가 사용되는지 컴파일러가 완벽히 파악할 수 있어 안전하게 미사용 코드를 배제할 수 있습니다.
• CommonJS (CJS, require()): 동적(Dynamic) 구조입니다. 조건문 안이나 함수 내부에서 런타임에 모듈을 호출할 수 있어, 번들러가 부수 효과(Side-Effects) 발생 위험 때문에 사용되지 않는 코드도 함부로 지우지 못합니다.
• 라이브러리 제작 시 package.json에 "sideEffects": false를 선언해야 번들러가 적극적으로 트리셰이킹을 수행할 수 있습니다.

CSS는 렌더링 차단 리소스(Render-blocking resource)입니다. CSS 파일이 다운로드되고 파싱되기 전까지 브라우저는 화면 그리기를 중단합니다.

• 동일한 선택자 병합 및 숏핸드(Shorthand) 속성 치환 (margin-top: 10px; margin-right: 0; margin-bottom: 10px; margin-left: 0; -> margin:10px 0)
• Tailwind CSS의 JIT 엔진이나 PurgeCSS를 적용하여, 실제 HTML 템플릿에서 쓰인 클래스만 선별 추출하여 수 메가바이트의 CSS를 수 킬로바이트로 줄입니다.

소스맵(.map)은 압축된 프로덕션 코드를 원본 타입스크립트 코드로 복원해 주는 디버깅 파일입니다. 하지만 소스맵을 고객에게 공개된 웹 서버에 그대로 배포하면 비즈니스 로직과 내부 API 구조가 경쟁사나 해커에게 완벽히 노출됩니다. CI/CD 단계에서 Sentry나 Datadog 같은 모니터링 서버로만 소스맵을 비공개 업로드하고, 공용 서빙 번들에서는 소스맵 주석을 반드시 제거해야 합니다. 간단한 텍스트 압축은 DevUtils CSS Minifier 및 JS Minifier를 통해 로컬에서 즉시 수행할 수 있습니다.