๐Ÿ“ฆ ์•„์ด์ฝ˜, ๋Œ€์ฒด ๋„Œ ์™œ ์ด๋ ‡๊ฒŒ ํฌ๋‹ˆ..

์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”: ์•„์ด์ฝ˜ ํŒจํ‚ค์ง€ ๋ฒˆ๋“ค ํฌ๊ธฐ ์ค„์ด๊ธฐ

2025๋…„ 9์›” 19์ผ

๐Ÿซฃ ์•„์ด์ฝ˜, ๋Œ€์ฒด ๋„Œ ์™œ ์ด๋ ‡๊ฒŒ ํฌ๋‹ˆ..

์ด์ „ ๊ธ€์—์„œ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ๋ถ„์„ํ•˜๊ธฐ ์œ„ํ•ด @next/bundle-analyzer๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ ์•„์ด์ฝ˜์ด ์ฐจ์ง€ํ•˜๋Š” ๋น„์œจ์ด ์ƒ๊ฐ๋ณด๋‹ค ํฌ๋‹ค๋Š” ์‚ฌ์‹ค์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

์›น ์„œ๋น„์Šค์—์„œ ์•„์ด์ฝ˜์ด ์ฐจ์ง€ํ•˜๋Š” ๋น„์œจ
๋ฒˆ๋“ค ๋ถ„์„ ๊ฒฐ๊ณผ - ์•„์ด์ฝ˜ ๋น„์œจ

์Šคํ† ๋ฆฌ๋ถ ์ „์šฉ ๊ธฐ๋Šฅ๊ณผ ๋ฒˆ๋“ค ๋ฌธ์ œ

์•„์ด์ฝ˜ ํŒจํ‚ค์ง€๋Š” ๋‘ ๊ฐ€์ง€ ์š”์†Œ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • iconRegistry: ์Šคํ† ๋ฆฌ๋ถ์—์„œ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์„ ์œ„ํ•ด ์•„์ด์ฝ˜์„ ๋“ฑ๋กํ•ด๋‘” ๋ฐ์ดํ„ฐ
  • ๊ฐœ๋ณ„ ์•„์ด์ฝ˜ ์ปดํฌ๋„ŒํŠธ: SVGR๋กœ ๋ณ€ํ™˜๋œ ์ปดํฌ๋„ŒํŠธ
iconRegistry๋ฅผ ํ†ตํ•œ ์Šคํ† ๋ฆฌ๋ถ์—์„œ์˜ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ
์Šคํ† ๋ฆฌ๋ถ ์•„์ด์ฝ˜ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ

์Šคํ† ๋ฆฌ๋ถ์—์„œ๋Š” tags๋ฅผ ์ด์šฉํ•ด "apple"์ด๋ผ๊ณ  ๊ฒ€์ƒ‰ํ•˜๋ฉด Apple ์•„์ด์ฝ˜์„ ๋ฐ”๋กœ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒ€์›๋“ค์ด ์•„์ด์ฝ˜์„ ๋น ๋ฅด๊ฒŒ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

๋ฌธ์ œ๋Š” ์‹ค์ œ ์„œ๋น„์Šค ์ฝ”๋“œ์—์„œ๋Š” iconRegistry๋ฅผ ์ „ํ˜€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋ฐ๋„ ๋ฒˆ๋“ค์— ํฌํ•จ๋˜๊ณ  ์žˆ์—ˆ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ์Šคํ† ๋ฆฌ๋ถ์—์„œ๋งŒ ํ•„์š”ํ•œ ์ฝ”๋“œ๊ฐ€ ์›น์‚ฌ์ดํŠธ ๋ฒˆ๋“ค์— ๋“ค์–ด๊ฐ€์ง€ ์•Š๋„๋ก ์„ค์ •ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.


ํŠธ๋ฆฌ์…ฐ์ดํ‚น: ๊ผญ ํ•„์š”ํ•œ ์•„์ด์ฝ˜๋งŒ ๋‚จ๊ธฐ๊ธฐ

ํŠธ๋ฆฌ์…ฐ์ดํ‚น์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ฝ”๋“œ๋ฅผ ๋ฒˆ๋“ค์—์„œ ์ œ๊ฑฐํ•˜๋Š” ์ตœ์ ํ™” ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ˆ˜์‹ญ ๊ฐœ ์•„์ด์ฝ˜ ์ค‘ + ์•„์ด์ฝ˜ ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ์ตœ์ข… ๋ฒˆ๋“ค์—๋Š” + ์•„์ด์ฝ˜ ์ฝ”๋“œ๋งŒ ๋‚จ๊ณ  ๋‚˜๋จธ์ง€๋Š” ์ „๋ถ€ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค.

Vite์—์„œ ๋ชจ๋“ˆ ๊ตฌ์กฐ ์œ ์ง€ํ•˜๊ธฐ

๋ฒˆ๋“ค๋Ÿฌ๋กœ Vite๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์˜ต์…˜์ด preserveModules์ž…๋‹ˆ๋‹ค. ์ด ์˜ต์…˜์„ ์ผœ๋ฉด ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ์ด ํ•˜๋‚˜์˜ ํฐ ํŒŒ์ผ๋กœ ํ•ฉ์ณ์ง€์ง€ ์•Š๊ณ , ๊ฐ ๋ชจ๋“ˆ์ด ๋…๋ฆฝ์ ์œผ๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

์˜ต์…˜์„ค๋ช…
preserveModules๋ชจ๋“ˆ ๊ตฌ์กฐ ์œ ์ง€
preserveModulesRoot๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ์˜ ํด๋” ๊ธฐ์ค€์  ์„ค์ • (src ํด๋” ๊ณ„์ธต ์ƒ๋žต)
entryFileNameschunk ํŒŒ์ผ๋ช… ๊ฒฐ์ •

ํ•˜๋‚˜์˜ ํฐ ๋ฒˆ๋“ค๋กœ ํ•ฉ์ณ์ง€์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, ์‹ค์ œ ์‚ฌ์šฉ๋˜๋Š” ์•„์ด์ฝ˜๋งŒ ๋ถ„๋ฆฌ๋˜์–ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

sideEffects ์„ค์ •์œผ๋กœ ์ตœ์ ํ™” ๋•๊ธฐ

์•„์ด์ฝ˜ ์ปดํฌ๋„ŒํŠธ๋Š” DOM์„ ์กฐ์ž‘ํ•˜๊ฑฐ๋‚˜ CSS๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ถ€์ˆ˜ํšจ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. package.json์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์ •ํ•ด ํŠธ๋ฆฌ์…ฐ์ดํ‚น์ด ํ™•์‹คํžˆ ๋™์ž‘ํ•˜๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

์—”ํŠธ๋ฆฌ ๋ถ„๋ฆฌ์™€ Multi-entry ์ ์šฉ

iconRegistry๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์€๋ฐ ์•„๋ž˜์ฒ˜๋Ÿผ ๊ฐ€์ ธ์˜ค๋ฉด ๋ชจ๋“  ์•„์ด์ฝ˜์ด ๋ฒˆ๋“ค์— ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ๋ง‰๊ธฐ ์œ„ํ•ด ์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ๋ฅผ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. index์™€ registry๋ฅผ ๊ฐ๊ฐ ๋…๋ฆฝ์ ์ธ ์ง„์ž…์ ์œผ๋กœ ์„ค์ •ํ•ด ํ•„์š”ํ•œ ๊ณณ์—์„œ๋งŒ importํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

Vite์—์„œ๋„ Multi-entry ์„ค์ •์œผ๋กœ ์•„์ด์ฝ˜ ํŒŒ์ผ๊ณผ registry ํŒŒ์ผ์„ ๋…๋ฆฝ์ ์ธ ์ง„์ž…์ ์œผ๋กœ ์ธ์‹ํ•˜๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ตœ์ ํ™” ์ ์šฉ ๊ฒฐ๊ณผ, ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด์ฝ˜๋งŒ ๋ฒˆ๋“ค์— ํฌํ•จ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ž‘์•„์ง„ ์•„์ด์ฝ˜ ๋ฒˆ๋“ค์˜ ํฌ๊ธฐ
์ตœ์ ํ™” ํ›„ ๋ฒˆ๋“ค ํฌ๊ธฐ

๋งˆ์น˜๋ฉฐ

์ด์ „์—๋Š” ๋™์ž‘๋งŒ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค๋ฉด, ์ด๋ฒˆ ์ž‘์—…์„ ํ†ตํ•ด ์‹ค์ œ๋กœ ์–ด๋–ค ์ฝ”๋“œ๊ฐ€ ๋ฒˆ๋“ค์— ํฌํ•จ๋˜๊ณ  ์–ด๋–ค ์„ค์ •์ด ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š”์ง€ ์ฒด๊ฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜