Vite vs Snowpack
๐Ÿ“„

Vite vs Snowpack

Created
Jan 9, 2022 12:54 PM
Tags
web
js
performance
Snowpack๊ณผ Vite๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ๋นŒ๋“œ ํˆด์ด๋‹ค. ์ด ๋‘˜ ๋ชจ๋‘ ๊ฐœ๋ฐœ ์‹œ HMR์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ง€์›ํ•˜๋ฉฐ, ์ด ๋•Œ Esbuild๋ฅผ ์ด์šฉํ•˜์—ฌ ๋น ๋ฅธ ์†๋„๋กœ ๋นŒ๋“œ๋ฅผ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ณตํ†ต์ ์ด ์žˆ๋‹ค.
ย 
๋‹ค๋งŒ ๋ช‡ ๊ฐ€์ง€ ์ฐจ์ด์ ์ด ์žˆ์œผ๋ฉฐ, ์—ฌ๊ธฐ์„œ๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ์ด ์ฐจ์ด์ ์„ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋‚ด์šฉ์„ ๊ทผ๊ฑฐ๋กœ ๋งŒ์ผ Snowpack์„ ์‚ฌ์šฉํ•˜๋ ค ํ•œ๋‹ค๋ฉด ์ด๋ณด๋‹ค Vite๋ฅผ ๊ณ ๋ คํ•ด๋ณด๋Š” ๊ฒƒ์„ ๊ถŒํ•œ๋‹ค.

Diff 1. Production Build ๋ฐฉ์‹

Snowpack์€ Build ์‹œ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฒˆ๋“ค๋ง ๊ณผ์ •์„ ์ง„ํ–‰ํ•˜์ง€ ์•Š๋Š”๋‹ค.
ย 
์ด๋Š” Snowpack ๋ฌธ์„œ์—๋„ ๋ช…์‹œ๋˜์–ด ์žˆ๋Š” ์‚ฌํ•ญ์ด๋ฉฐ, ๊ฐ๊ฐ์˜ JavaScript/CSS/HTML ํŒŒ์ผ์„ ๋นŒ๋“œํ•œ ๋’ค ์ด๋ฅผ ๋ฒˆ๋“ค๋ง ๋ฐ ์ตœ์ ํ™”(minimize, mangling, tree-shaking, ...)๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š” ๋‹ค๋ฅธ ๋„๊ตฌ(webpack, rollup, esbuild ๋“ฑ)๋ฅผ ์ด์šฉํ•ด์•ผ ํ•œ๋‹ค.
ย 
๋ฌผ๋ก  Built-In(Esbuild) ๋ฐ Plugin(Rollup, Webpack) ๋ฐฉ์‹์œผ๋กœ ๋ฒˆ๋“ค๋ง์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ณต์‹์ ์œผ๋กœ ์ง€์›ํ•˜๊ณ ๋Š” ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Built-In ๋ฐฉ์‹์€ Production Build์— ์ ์šฉํ•˜๊ธฐ์—๋Š” ์•„์ง ์ด๋ฅด๋‹ค ์–ธ๊ธ‰๋˜๋Š” Esbuild๋งŒ์„ ์ง€์›ํ•˜๋ฉฐ, Plugin ๋ฐฉ์‹ ๋˜ํ•œ ์‚ฌ์šฉ์ž ์ˆ˜๊ฐ€ ๊ทธ๋ฆฌ ๋งŽ์ง€ ์•Š๊ณ (4k downloads/week) ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ชจ๋“ˆ์˜ ๊ด€๋ฆฌ๊ฐ€ ์ˆ˜ ๊ฐœ์›” ์งธ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๊ณ  ์žˆ๊ธฐ์— ์ด ์—ญ์‹œ ์‹ค์ œ ์„œ๋น„์Šค ํ”„๋กœ๋•์…˜์— ์ ์šฉํ•˜๊ธฐ์—๋Š” ๋ถ€์ ์ ˆํ•˜๋‹ค ํŒ๋‹จ๋œ๋‹ค.
ย 
Vite๋Š” Rollup์„ ๊ธฐ๋ฐ˜์œผ๋กœ๋งŒ Build๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค. ํ•˜๋‚˜์˜ ๋ฒˆ๋“ค๋Ÿฌ๋งŒ์„ ์ด์šฉํ•˜๊ธฐ์— Snowpack ๋Œ€๋น„ ๋”์šฑ ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์„ Out-Of-The-Box๋กœ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด์Šˆ ๋Œ€์‘, ๋ฒˆ๋“ค๋Ÿฌ ์„ค์ •, ๋ฒˆ๋“ค๋ง ๋œ ํŒŒ์ผ์˜ ํฌ๊ธฐ ๋ชจ๋‘ Snowpack ๋Œ€๋น„ ์šฐ์ˆ˜ํ•˜๋‹ค. ๋ฌผ๋ก  ๋ฒˆ๋“ค๋ง ์†๋„ ๋˜ํ•œ ํฌ๊ฒŒ ๋’ค์ง€์ง€ ์•Š๋Š” ํŽธ.

Diff 2. Pre-Bundled Dependencies

Vite๋Š” (๋กœ์ปฌ์—์„œ)๊ฐœ๋ฐœ ์‹œ ์‚ฌ์šฉ๋˜๋Š” ๋””ํŽœ๋˜์‹œ๋ฅผ ์‚ฌ์ „์— ๋ฒˆ๋“ค๋งํ•œ ๋’ค ์บ์‹ฑํ•œ๋‹ค. ์ด ๋•๋ถ„์— ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ์žฌ์‹œ์ž‘ํ•˜๋”๋ผ๋„ ๋””ํŽœ๋˜์‹œ๋ฅผ โ€˜๋‹ค์‹œ' ๋ฒˆ๋“ค๋ง ํ•  ํ•„์š”๊ฐ€ ์—†๊ฒŒ ๋œ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ ์†๋„์˜ ํ–ฅ์ƒ์œผ๋กœ ์ด์–ด์ง„๋‹ค.

Diff 3. First-Class Vue Support

์ฒ˜์Œ Vite๋Š” Vue ํˆด๋ง๋งŒ์„ ํƒ€๊นƒ์œผ๋กœ ๋‚˜์™”๋‹ค. ๋ฌผ๋ก  ์ง€๊ธˆ(Vite 2.0)์€ ํ”„๋ ˆ์ž„์›Œํฌ์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š์œผ๋‚˜, ์ฒ˜์Œ์—๋Š” ๊ทธ๋žฌ๋‹ค. ๋‹ค๋งŒ ์ด๋Ÿฌํ•œ ์ปจ์…‰์€ ํ˜„์žฌ๊นŒ์ง€๋„ ์ด์–ด์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ๋นŒ๋“œ ํˆด๋ณด๋‹ค Vue๋งŒ์„ ํƒ€๊นƒ์œผ๋กœ ํ•˜๋Š” ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ๋“ค์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋‹ค.
ย 
์˜ˆ๋ฅผ ํ•˜๋‚˜ ๋“ค์–ด๋ณด์ž๋ฉด, <script setup> ์ด ์žˆ๋‹ค.
ย 
<script lang="ts" setup>
// ...
</script>
ย 
์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์€ Vue๋งŒ์„ ํƒ€๊นƒ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋ฉฐ, ์ด ๋•๋ถ„์— Vue ๊ฐœ๋ฐœ ์‹œ Vite๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋งค๋ ฅ์ ์ธ ์„ ํƒ์ง€๊ฐ€ ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค€๋‹ค.

Conclusion

์š”์•ฝํ•œ ๋‚ด์šฉ์ด ๋ถ€์กฑํ•˜๋‹ค ํŒ๋‹จ๋˜๋ฉด Vite ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๋งˆ์ง€๋ง‰์œผ๋กœ, NPM Trends๋ฅผ ๋น„๊ตํ•˜์ž๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.
ย 
Vite vs Snowpack : Downloads in past 1 year
Vite vs Snowpack : Downloads in past 1 year
Vite vs Snowpack : NPM Stats
Vite vs Snowpack : NPM Stats
ย 

Loading Comments...