프론트엔드 안티패턴 (6) — 번들과 경계: 트리셰이킹은 왜 실패하는가

# Next.js
npm i -D @next/bundle-analyzer
ANALYZE=true npm run build
 
# Vite
npm i -D rollup-plugin-visualizer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({ /* ... */ });

// 🔴 lodash 전체 — 약 70KB
import _ from 'lodash';
_.debounce(fn, 300);
 
// ✅ 필요한 것만 (ESM 빌드)
import debounce from 'lodash-es/debounce';
// 또는 애초에 직접 구현 (debounce는 10줄입니다)

// 🔴 moment — 로케일 포함 시 300KB 이상, 트리셰이킹 불가 구조
import moment from 'moment';
 
// ✅ 대안들
import { format } from 'date-fns';            // 필요한 함수만
import { DateTime } from 'luxon';             // 더 작음
// Intl.DateTimeFormat — 번들 0KB, 브라우저 내장
new Intl.DateTimeFormat('ko-KR', { dateStyle: 'long' }).format(date);

// 🔴 아이콘 세트 전체
import * as Icons from 'react-icons/fa';
 
// ✅ 개별 import
import { FaUser } from 'react-icons/fa';
// 또는 SVG를 직접 컴포넌트화 (12개뿐이라면 이게 최선)

npx bundlephobia <package-name>
# 또는 https://bundlephobia.com 에서 확인

// package.json
{
  "sideEffects": false
}

{
  "sideEffects": ["*.css", "*.scss", "./src/polyfills.ts"]
}

// CJS는 정적 분석이 어렵다 — 런타임에 exports가 바뀔 수 있으므로
module.exports = { a, b, c };

// src/shared/ui/index.ts
export * from './Button';
export * from './Modal';
export * from './DatePicker';   // 무거운 의존성을 가짐

// 이 한 줄이 DatePicker까지 끌어올 수 있다
import { Button } from '@/shared/ui';

// next.config.js — 배럴 import를 개별 import로 자동 변환
module.exports = {
  experimental: {
    optimizePackageImports: ['@/shared/ui', 'lucide-react', 'date-fns'],
  },
};

// 사용하지 않아도 클래스 정의만으로 부수효과가 발생할 수 있다
class Analytics {
  static instance = new Analytics();   // 모듈 평가 시 실행
}

// 🔴 번들러가 무엇이 쓰일지 알 수 없다 → 전부 포함
const icons = { user: FaUser, home: FaHome, ... };
const Icon = icons[name];

// 무거운데 처음엔 안 보이는 것들
const RichTextEditor = dynamic(() => import('@/features/editor'), { ssr: false });
const DataChart = dynamic(() => import('@/widgets/chart'));
const PdfViewer = dynamic(() => import('@/features/pdf-viewer'), { ssr: false });

// 🔴 버튼 하나를 lazy로
const SaveButton = lazy(() => import('./SaveButton'));

// 🔴 3편의 그 문제 — 매 렌더 새 lazy 컴포넌트 → 매번 다시 로드
function Page() {
  const Editor = lazy(() => import('./Editor'));
  return <Suspense><Editor /></Suspense>;
}
 
// ✅ 모듈 스코프
const Editor = lazy(() => import('./Editor'));

// 🔴 로딩 중 아무것도 없다가 갑자기 나타남 → CLS
<Suspense fallback={null}><Chart /></Suspense>
 
// ✅ 최종 크기와 같은 공간을 잡는다
<Suspense fallback={<div className="h-[320px] animate-pulse rounded bg-slate-100" />}>
  <Chart />
</Suspense>

// 사용자가 의도를 드러내는 순간 미리 받는다
<button
  onMouseEnter={() => import('./Editor')}
  onFocus={() => import('./Editor')}
  onClick={open}
>
  편집
</button>

// package.json — 없으면 번들러가 보수적으로 잡아 불필요한 트랜스파일이 발생
{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead",
    "not op_mini all"
  ]
}

// 🔴 core-js 전부
import 'core-js';
 
// ✅ 타깃에 따라 필요한 것만 (babel preset-env + useBuiltIns: 'usage')

<script type="module" src="/modern.js"></script>
<script nomodule src="/legacy.js"></script>

npm ls react
# └─┬ some-ui-lib@2.0.0
#   └── react@17.0.2 deduped 안 됨   ← React가 두 벌 들어있다

// package.json — 하나로 강제
{
  "overrides": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}

# 중복 확인
npx npm-why react
npm dedupe

// 🔴 app/dashboard/layout.tsx
'use client';
// → 이 아래 모든 컴포넌트가 클라이언트 번들에 들어간다

// app/dashboard/page.tsx — 서버 컴포넌트
import { InteractiveFilter } from './InteractiveFilter';   // 이것만 클라이언트
 
export default async function DashboardPage() {
  const data = await getData();                 // 서버에서 직접 DB 접근
  return (
    <>
      <h1>대시보드</h1>
      <InteractiveFilter />                     {/* 'use client' */}
      <DataTable rows={data} />                 {/* 서버 컴포넌트 유지 */}
    </>
  );
}

// ✅ children은 부모(서버)에서 이미 렌더된 결과로 전달된다
// app/page.tsx (서버)
<ClientTabs>
  <ServerHeavyContent />       {/* 서버에서 렌더됨 */}
</ClientTabs>
 
// ClientTabs.tsx
'use client';
export function ClientTabs({ children }: { children: ReactNode }) {
  const [tab, setTab] = useState(0);
  return <div>{/* ... */}{children}</div>;
}

// lib/db.ts
import 'server-only';        // 클라이언트에서 import하면 빌드 에러
 
export const db = createConnection(process.env.DATABASE_URL!);

// lib/browser-utils.ts
import 'client-only';        // 서버에서 import하면 빌드 에러

# .env
NEXT_PUBLIC_API_SECRET=sk_live_abc123      # 🔴 전 세계에 공개됨
NEXT_PUBLIC_ADMIN_TOKEN=...                # 🔴

// 개발 중: 클라이언트에서 API를 직접 호출하고 싶다
const res = await fetch('https://api.thirdparty.com/data', {
  headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_KEY}` },
});

// app/api/thirdparty/route.ts — 서버에서만 실행
export async function GET() {
  const res = await fetch('https://api.thirdparty.com/data', {
    headers: { Authorization: `Bearer ${process.env.API_KEY}` },   // 접두사 없음
  });
  return Response.json(await res.json());
}

// 클라이언트는 자기 서버만 호출
const res = await fetch('/api/thirdparty');

# 빌드 결과에서 비밀 패턴 검색
grep -rE "(sk_live|AKIA[0-9A-Z]{16}|-----BEGIN)" .next/static/ && echo "유출 의심!" && exit 1

// next.config.js
module.exports = {
  productionBrowserSourceMaps: false,   // 기본값
};

# 🔴 CI에서 npm install — lockfile을 무시하고 버전을 올릴 수 있다
npm install
 
# ✅ lockfile 그대로
npm ci

// 🔴 범위 지정 — 빌드할 때마다 다른 버전이 들어올 수 있다
{ "dependencies": { "some-lib": "^2.0.0" } }

# 🔴 해시 없는 파일명 + 긴 캐시 → 배포해도 사용자가 옛 파일을 본다
/static/app.js       Cache-Control: max-age=31536000
 
# ✅ 내용 해시가 붙은 파일은 영구 캐시
/static/app.a1b2c3.js   Cache-Control: public, max-age=31536000, immutable
 
# ✅ HTML은 항상 재검증
/index.html             Cache-Control: no-cache

브라우저 타깃이 정의된 곳:
- package.json의 browserslist
- .babelrc의 targets
- tsconfig.json의 target/lib
- next.config.js의 swcMinify 옵션
→ 네 곳이 서로 다른 값을 가리킨다