💡 25. 번들 최적화 & 코드 스플리팅: 실전 성능 개선

// ❌ 모든 것을 즉시 로드 — 홈 화면에서도 에디터 코드가 로드됨
import MarkdownEditor from './MarkdownEditor'; // 1.2MB
import ChartDashboard from './ChartDashboard'; // 800KB
 
function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/write" component={MarkdownEditor} />
      <Route path="/stats" component={ChartDashboard} />
    </Router>
  );
}

// ✅ 필요한 시점에 로드 — 홈 화면에선 에디터 코드를 내려받지 않음
// import()는 Promise를 반환 — 해당 모듈이 필요할 때 네트워크 요청 발생
 
// /write 경로에 진입할 때만 MarkdownEditor 번들 다운로드 시작
const loadEditor = () => import('./MarkdownEditor'); // Promise<module>
const loadChart = () => import('./ChartDashboard');
 
// 실제 사용 시
loadEditor().then(module => {
  const MarkdownEditor = module.default;
  // 이제 MarkdownEditor 사용 가능
});

import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
// ✅ lazy로 컴포넌트를 선언 — 이 시점엔 아무것도 다운로드 안 됨
const MarkdownEditor = lazy(() => import('./pages/WritePage'));  // 실제 import는 나중에
const ChartDashboard = lazy(() => import('./pages/StatsPage'));
const AdminPanel = lazy(() => import('./pages/AdminPage'));
 
function App() {
  return (
    <Router>
      {/* Suspense: lazy 컴포넌트가 로딩 중일 때 fallback UI 표시 */}
      <Suspense fallback={<PageSpinner />}>
        <Routes>
          <Route path="/" element={<Home />} />         {/* 정적 import: 항상 필요 */}
          <Route path="/write" element={<MarkdownEditor />} />  {/* /write 진입 시 다운로드 */}
          <Route path="/stats" element={<ChartDashboard />} />  {/* /stats 진입 시 다운로드 */}
          <Route path="/admin" element={<AdminPanel />} />      {/* /admin 진입 시 다운로드 */}
        </Routes>
      </Suspense>
    </Router>
  );
}

// ✅ 각 라우트마다 다른 로딩 UI 적용
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
 
        {/* 에디터 전용 로딩 UI */}
        <Route
          path="/write"
          element={
            <Suspense fallback={<EditorSkeleton />}>
              <MarkdownEditor />
            </Suspense>
          }
        />
 
        {/* 차트 전용 로딩 UI */}
        <Route
          path="/stats"
          element={
            <Suspense fallback={<ChartSkeleton />}>
              <ChartDashboard />
            </Suspense>
          }
        />
      </Routes>
    </Router>
  );
}

// lazy 컴포넌트 로딩 실패(네트워크 끊김 등)를 ErrorBoundary로 처리
function App() {
  return (
    <ErrorBoundary fallback={<p>페이지를 불러오지 못했어요. 새로고침 해주세요.</p>}>
      <Suspense fallback={<PageSpinner />}>
        <Routes>...</Routes>
      </Suspense>
    </ErrorBoundary>
  );
}

// ✅ 각 페이지를 별도 청크(chunk)로 분리
const HomePage = lazy(() => import('./pages/HomePage'));    // chunk: home
const WritePage = lazy(() => import('./pages/WritePage'));  // chunk: write
const ProfilePage = lazy(() => import('./pages/Profile'));  // chunk: profile

// ✅ 특정 무거운 컴포넌트만 지연 로딩
import { lazy, Suspense, useState } from 'react';
 
// 마크다운 에디터: 1.2MB — 게시글 작성 버튼을 클릭할 때만 필요
const MarkdownEditor = lazy(() => import('./MarkdownEditor'));
 
function PostForm() {
  const [isEditorOpen, setIsEditorOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsEditorOpen(true)}>에디터 열기</button>
 
      {isEditorOpen && (
        <Suspense fallback={<p>에디터 로딩 중...</p>}>
          <MarkdownEditor />  {/* 버튼 클릭 후에야 1.2MB 다운로드 시작 */}
        </Suspense>
      )}
    </div>
  );
}

// 스플리팅 효과가 있는 경우
const RichTextEditor = lazy(() => import('react-quill'));  // 500KB 이상 → 효과적
const PdfViewer = lazy(() => import('./PdfViewer'));       // 무거운 PDF 렌더러
const VideoPlayer = lazy(() => import('./VideoPlayer'));   // 비디오 플레이어
 
// 스플리팅 효과가 없거나 오히려 손해인 경우
const SmallButton = lazy(() => import('./Button')); // ❌ 2KB 컴포넌트 → 오버헤드가 더 큼
// → 네트워크 요청 오버헤드 > 파일 크기 절약 효과

# Create React App (CRA) 사용 시
npm install --save-dev source-map-explorer
# package.json에 스크립트 추가:
# "analyze": "source-map-explorer 'build/static/js/*.js'"
npm run build && npm run analyze
 
# Vite 사용 시
npm install --save-dev rollup-plugin-visualizer
# vite.config.ts에 추가:
# plugins: [visualizer({ open: true })]
npm run build  # 빌드 시 자동으로 시각화 파일 생성
 
# Next.js 사용 시
npm install --save-dev @next/bundle-analyzer
# next.config.js에 설정 추가 후:
ANALYZE=true npm run build

// ❌ moment.js: 400KB
import moment from 'moment';
const formatted = moment(date).format('YYYY년 MM월 DD일');
 
// ✅ dayjs: 2KB (200배 차이!)
import dayjs from 'dayjs';
import 'dayjs/locale/ko'; // 한국어 로케일만 추가 (선택적)
dayjs.locale('ko');
const formatted = dayjs(date).format('YYYY년 MM월 DD일');
 
// ✅ date-fns: 필요한 함수만 트리셰이킹
import { format } from 'date-fns';
import { ko } from 'date-fns/locale';
const formatted = format(date, 'yyyy년 MM월 dd일', { locale: ko });

// ✅ Tree Shaking이 되는 named export
import { debounce } from 'lodash-es'; // debounce만 번들에 포함
// → 나머지 lodash 함수 수백 개는 제거됨
 
// ❌ Tree Shaking이 안 되는 default export (전체 import)
import _ from 'lodash';         // lodash 전체 번들에 포함!
const debounced = _.debounce(); // debounce 하나만 써도 lodash 전체가 들어옴

// ❌ 1. CommonJS 모듈은 Tree Shaking 불가
const { debounce } = require('lodash'); // require는 Tree Shaking 불가!
// → ESM(import/export)만 Tree Shaking 가능
 
// ❌ 2. 와일드카드 import
import * as Icons from 'react-icons/fa'; // 모든 아이콘 포함!
import { FaUser, FaHeart } from 'react-icons/fa'; // ✅ 개별 import
 
// ❌ 3. 사이드 이펙트가 있는 모듈
import 'some-css-library'; // CSS 파일은 Tree Shaking 대상 아님
import './polyfills';      // 실행되어야 하는 코드도 Tree Shaking 대상 아님
 
// ✅ 올바른 개별 import 패턴
import { format, parseISO } from 'date-fns'; // 두 함수만 번들에 포함

// package.json
{
  "sideEffects": false  // 모든 파일이 사이드 이펙트 없음 → 번들러가 적극적으로 제거
  // 또는
  "sideEffects": ["*.css", "./src/polyfills.js"]  // 특정 파일만 사이드 이펙트 있음
}

# Chrome DevTools → Lighthouse 탭 → Generate Report
# 또는 CLI
npm install -g lighthouse
lighthouse https://your-site.com --view

// ✅ 1. 이미지 지연 로딩 (스크롤 하단 이미지)
<img src="photo.jpg" loading="lazy" alt="게시글 이미지" />
 
// ✅ 2. 첫 화면 이미지는 preload 힌트
<link rel="preload" as="image" href="/hero-image.webp" />
 
// ✅ 3. 현대적 이미지 포맷 사용
// WebP는 JPEG 대비 25-35% 작음
// AVIF는 WebP 대비 20% 더 작음
<picture>
  <source srcSet="hero.avif" type="image/avif" />
  <source srcSet="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="히어로 이미지" /> {/* 폴백 */}
</picture>
 
// ✅ 4. 이미지 크기 명시 (CLS 방지)
<img src="photo.jpg" width={400} height={300} alt="..." />
// width/height 없으면 이미지 로드 전 크기를 모름 → 레이아웃 이동(CLS) 발생!

import { Profiler } from 'react';
 
function onRenderCallback(
  id: string,           // Profiler의 id prop
  phase: 'mount' | 'update', // 첫 마운트인지 업데이트인지
  actualDuration: number,    // 실제 렌더 시간 (ms)
  baseDuration: number,      // 최적화 없는 예상 렌더 시간
) {
  // 렌더 시간이 16ms(60fps) 초과 시 최적화 필요
  if (actualDuration > 16) {
    console.warn(`[${id}] 렌더 최적화 필요: ${actualDuration.toFixed(2)}ms`);
  }
}
 
// 측정하고 싶은 컴포넌트 트리를 Profiler로 감싸기
function App() {
  return (
    <Profiler id="PostFeed" onRender={onRenderCallback}>
      <PostFeed />
    </Profiler>
  );
}

// ✅ lazy 컴포넌트는 반드시 Suspense로 감싸야 함
const LazyComponent = lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

// named export 컴포넌트를 lazy로 import 시도
const { MyComponent } = lazy(() => import('./MyComponents')); // ❌

// 방법 1: 해당 파일에서 default export 추가
// MyComponent.tsx
export default function MyComponent() { ... }
 
// 방법 2: 래퍼를 통해 named → default 변환
const MyComponent = lazy(() =>
  import('./MyComponents').then(module => ({ default: module.MyComponent }))
);

# 1. 해당 패키지가 ESM을 지원하는지 확인
cat node_modules/lodash/package.json | grep '"module"'
# "module" 필드가 없으면 CommonJS → Tree Shaking 안 됨
 
# 2. lodash-es 대신 lodash 쓰고 있지 않은지 확인
# lodash는 CommonJS, lodash-es는 ESM

// lodash (CommonJS) → lodash-es (ESM)로 변경
// Before
import { debounce } from 'lodash';
 
// After
import { debounce } from 'lodash-es';
// 또는 직접 구현 (debounce는 몇 줄이면 가능)

// 에디터 페이지를 지연 로딩하되, 로딩 중엔 <Spinner/>를 표시해야 해
 
const EditorPage = ________(() => import('./EditorPage')); // 1번
 
function App() {
  return (
    <________ fallback={<Spinner />}> // 2번
      <EditorPage />
    </________>
  );
}