vite build — 출력 검사

빌드 후 dist/ 디렉토리 열어. 거기 모든 파일이 본인이 서빙할 것. 각각 뭐고 왜 존재하는지 이름 댈 수 있으면 출하한 게 뭔지 이해함.

출력 모양

npm run build 후:

dist/
  index.html                   # hashed asset 링크 가진 HTML shell
  assets/
    index-[hash].js            # 메인 JS 번들
    index-[hash].css           # 추출된 CSS
    [Page]-[hash].js           # React.lazy import 당 chunk 하나
    [asset]-[hash].png         # 정적 asset, 지문 찍힘

Hash 는 컨텐츠 파생. 파일 컨텐츠 안 바뀌면 hash 안 바뀜, 브라우저/CDN 이 영원히 캐시 (immutable). 컨텐츠 바뀌면 hash 바뀌고 캐시 자동 무효화.

번들에 들어가는 것

소스 — 본인이 (전이적으로) import 한 모든 TS/TSX/CSS/JSON.
의존성 — 실제로 import 한 것만. Tree-shake 가 안 쓴 export 제거.
정적 asset — import logo from './logo.png' 통해 import 된 이미지, 폰트, SVG. Import 가 hashed URL 반환.

안 들어가는 것: public/ 의 어떤 것 (as-is 복사, hashing 없음), VITE_ prefix 없는 env var (서버 전용 또는 클라이언트에서 완전 빠짐).

번들 검사

rollup-plugin-visualizer 설치 (Rollup 통한 Vite 플러그인). 본인 번들의 treemap 생성 → 어느 패키지가 가장 큰지 봄. 흔한 발견: 헬퍼 하나에만 필요했던 거대한 라이브러리의 stray import, 골라 쓰지 않고 통째 import 된 아이콘 셋.

이해하는 거 출하. npm run build 돌리고 dist/ 봐. JS 파일 텍스트 에디터로 열어 (minified 지만 읽을 만함). 번들이 제품 표면. 안에 뭐 있는지 아는 게 '뭔가 만들었음' 과 '뭔가 출하했음' 의 차이.

Code

Bundle visualizer 추가·ts

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    visualizer({
      filename: "dist/stats.html",
      open: true, // 빌드 후 열림
      template: "treemap", // 또는 'sunburst', 'network'
    }),
  ],
});

// `npm run build` 후: dist/stats.html 이 시각적 treemap 과 함께 열림.
// 사각형에 hover 해서 사이즈, gzip 사이즈, 모듈 경로 봄.

`npm run preview` 가 하는 것·bash

# 프로덕션 모드 dev server — dist/ 를 진짜 정적 호스트처럼 서빙.
npm run build
npm run preview
# → http://localhost:4173 가 프로덕션 번들 서빙.
# 진짜 perf 프로파일 (DevTools, Lighthouse) 에 사용 — dev server 아님.

Exercise

Bootstrap 프로젝트에서 npm run build 돌림. dist/ 열기. 식별: HTML shell, 메인 JS chunk, code-split chunk (lesson 2 에서 React.lazy 쓰면 생김), CSS 파일, 정적 asset. rollup-plugin-visualizer 설치, rebuild, dist/stats.html 열고 가장 큰 의존성 찾기. 사이즈 값 하는지 결정.

Hint

흔한 범인: moment.js (date-fns 또는 네이티브 Intl 써), lodash (import _ from 'lodash' 대신 lodash/fn 에서 cherry-pick), 통째 import 된 아이콘 라이브러리. 각각 교체 또는 cherry-pick 으로 큰 절약.

vite build — 출력 검사

출력 모양

번들에 들어가는 것

번들 검사

Code

External links

Exercise

Progress

댓글 0