chunk file (main + chunkFilename)

Jinmin KimΒ·2025λ…„ 5μ›” 30일

1️⃣ 메인 λ²ˆλ“€ (filename)

🌟 μ •μ˜: μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 첫 μ§„μž…μ (entry) μ½”λ“œλ₯Ό λ¬ΆλŠ” 청크

  • 정적 import된 λͺ¨λ“ˆλ“€(index.js β†’ App.js β†’ Header, Home, Footer λ“±)이 λͺ¨λ‘ 포함
  • λΈŒλΌμš°μ €κ°€ 졜초 λ‘œλ”© μ‹œ λ°˜λ“œμ‹œ λ‹€μš΄λ‘œλ“œ

πŸ“‚ μ˜ˆμ‹œ 파일λͺ…

  • ν”„λ‘œλ•μ…˜: releases/static/js/main.1a2b3c4d.js
  • 개발: releases/static/js/main.bundle.js

2️⃣ μΆ”κ°€ 청크 (chunkFilename)

🌟 μ •μ˜: 동적 import λ˜λŠ” SplitChunksPlugin 으둜 λΆ„λ¦¬λœ β€œν•„μš”ν•  λ•Œ λ‘œλ“œβ€ 청크

  • React.lazy, import() 둜 λΆ„λ¦¬λœ μ»΄ν¬λ„ŒνŠΈ
  • splitChunks.cacheGroups 섀정에 λ”°λ₯Έ vendors~main 같은 곡톡 라이브러리

πŸ“‚ μ˜ˆμ‹œ 파일λͺ…

  • ν”„λ‘œλ•μ…˜:
    • releases/static/js/0.abcd1234.chunk.js (About.js λ“± 동적 뢄리)
    • releases/static/js/vendors~main.efgh5678.chunk.js (곡톡 라이브러리)
  • 개발:
    • releases/static/js/0.chunk.js
    • releases/static/js/vendors~main.chunk.js

3️⃣ 핡심 μš”μ•½

1️⃣ filename β†’ [name]이 κΈ°λ³Έ main β†’ 정적 λͺ¨λ“ˆ 묢음 β†’ 첫 λ‘œλ“œ

2️⃣ chunkFilename β†’ [name]이 청크 ID/이름 β†’ 동적 뢄리 λͺ¨λ“ˆ β†’ μ§€μ—° λ‘œλ“œ

3️⃣ 이점 β†’ 초기 λ²ˆλ“€ μ‚¬μ΄μ¦ˆ μΆ•μ†Œ + λ„€νŠΈμ›Œν¬ 효율 κ·ΉλŒ€ν™”


✨ μ΄λ ‡κ²Œ 메인 λ²ˆλ“€κ³Ό μ½”λ“œ μŠ€ν”Œλ¦Ώ 청크λ₯Ό λΆ„λ¦¬ν•˜λ©΄,

  • μ‚¬μš©μžμ—κ²Œ λΉ λ₯Έ 첫 화면을 μ œκ³΅ν•˜κ³ ,
  • μΆ”ν›„ ν•„μš”ν•œ μ½”λ“œλ§Œ λ‘œλ“œν•΄ μ΅œμ ν™”λœ μ„±λŠ₯을 얻을 수 μžˆμŠ΅λ‹ˆλ‹€!
profile
Let's do it developer

0개의 λŒ“κΈ€