1. 번들링이란?
웹 개발에서 자바스크립트, CSS, 이미지 파일 등을 여러 개의 작은 파일로 나누어 놓고 작업하는데, 이들을 하나의 파일로 합치는 과정
필요한 이유
-
네트워크 요청 최소화
웹사이트에 여러 개의 자바스크립트 파일이나 CSS 파일이 있으면, 브라우저가 각각의 파일을 다운로드할 때 여러 번의 네트워크 요청을 함. 많은 요청이 생기면 웹사이트가 느려지고, 사용자 경험이 좋지 않음. 그래서 모든 파일을 하나로 묶어서 한 번의 요청으로 여러 파일을 다운로드하게 하는 것이 중요함. -
최적화
자바스크립트 파일이나 CSS 파일에는 사용하지 않는 코드나 중복된 코드가 있을 수 있어, 번들링을 하면서 불필요한 코드를 제거하고, 필요한 코드만 포함시켜서 웹사이트의 성능을 향상시킬 수 있음. -
파일 크기 축소
번들링할 때는 압축(minification)과 같은 작업도 함께 진행되기 때문에, 파일 크기를 줄여서 웹사이트 로딩 속도를 빠르게 할 수 있음.
2. 번들링의 히스토리
1) 웹은 HTML+CSS+JS로 구성됨
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello</h1>
<script src="script.js"></script>
</body>
</html>2) 웹의 규모가 커지면서 JS파일이 많아지기 시작함
3) 파일이 많아지면서 관리하기 위해 모듈시스템이 등장함 (ex ES6 모듈 (import/export))
// user.js
export function getUser() { ... }
// main.js
import { getUser } from './user.js';4) 번들러(Bundler)의 등장
-
Webpack, Parcel, Rollup 같은 툴들이 대표적
-
번들러의 역할
개발자가 import/export로 여러 개 파일로 개발을 하더라도, 배포할 때는 이 모든 파일들을 하나의 큰 파일로 "번들링(묶기)" 해서 만들어줌
브라우저는 묶인 파일 하나만 다운로드 하니 훨씬 빠름
(ex: 개발할 때는 파일 100개 → 번들러가 자동으로 bundle.js 하나로 만들어줌.) -
단점
프로젝트가 커질수록 번들링하는 시간이 길어짐 (몇 분 걸리기도)
개발 중에 코드를 수정하면 또다시 전체 번들 과정을 거쳐야 해서 느린 핫리로딩 문제가 생김.
5) Vite의 등장
- Vite는 "굳이 개발 중에 전체 번들링을 매번 할 필요 있나?" 라는 발상에서 시작
- Vite는 개발 중엔 파일을 하나씩 필요할 때 바로 변환해서 제공하는 방식
- 배포용 빌드 때는 여전히 번들링을 해서 최적화된 파일을 만듬
3. 비교
1) 번들러가 없을때
[브라우저]
↓
<script src="jquery.js"></script>
<script src="plugin.js"></script>
<script src="main.js"></script>
↓
📂 여러 파일 개별 다운로드 (HTTP 요청 여러 번)
⚠️ 파일 순서 중요
⚠️ 파일 많으면 느림2) 번들러 사용 (webpack)
개발자:
- main.js
- hello.js
- utils.js
- componentA.js
- ...
↓ (Webpack 번들링)
🎁 bundle.js (하나로 묶음)
[브라우저]
↓
<script src="bundle.js"></script>
↓
📂 하나의 큰 파일 다운로드 (빠름)
✅ 파일 순서 문제 해결
⚠️ 개발 중엔 번들링 느림3) Vite 사용
개발 중:
[브라우저]
↓
import './hello.js'; // Vite가 ES 모듈로 개별 파일 제공
↓
📂 개별 파일 다운로드 (빠름)
✅ 개발 중엔 번들링 없이 실시간 반영
배포 시:
- main.js
- hello.js
- utils.js
↓
🎁 bundle.[hash].js (배포용으로 묶음)
[브라우저]
↓
<script src="bundle.[hash].js"></script>4. Nuxt3와 Vite
Nuxt 3는 Vite를 기본 빌드 도구로 채택했기 때문에 별도로 설치할 필요 없이 자동으로 Vite가 사용됨.
1) Nuxt.js와 Vite의 관계
Nuxt 2는 기본적으로 Webpack을 사용했지만, Nuxt 3부터는 기본 빌드 도구로 Vite를 사용함.
- Nuxt 3에서 Vite가 제공하는 장점
- 빠른 개발 속도: Vite는 실시간 모듈 로딩을 통해 수정된 부분만 빠르게 반영해주기 때문에 개발 중에 빌드 속도가 빠릅니다.
- 빠른 HMR (핫 모듈 리플레이스먼트): 코드 수정 시 바로바로 화면에 반영되어 개발자가 기다리는 시간을 줄여줍니다.
- 최적화된 배포: 최종 배포 시에는 Vite가 Rollup을 사용하여 코드를 최적화합니다.
2) Vite 사용 예시
- Nuxt 3 프로젝트를 생성하면 기본적으로 Vite가 설정되는데, Vite가 제대로 동작하는지 확인하려면, nuxt.config.ts 파일에서 Vite 관련 설정을 확인할 수 있음
// nuxt.config.ts
export default defineNuxtConfig({
build: {
transpile: ['vuetify'], // 예시: Vuetify 같은 라이브러리도 Vite로 처리
},
})- 라이브러리 가져오기: Nuxt 3 프로젝트에서 Vuetify 같은 라이브러리를 사용하면, Vite는 해당 라이브러리를 자동으로 관리하고 처리
- 번들링: Vite는 프로젝트 파일을 빠르게 모듈 단위로 불러오고, 필요할 때마다 해당 모듈만 다시 로드. 이때 라이브러리도 포함되어 Vite가 자동으로 번들링을 해주며, 최종적으로 하나의 파일로 묶어 배포하게 됨.
- 최적화: 배포 시에는 Rollup을 사용하여 최적화된 번들을 만들고, 필요 없는 코드나 중복된 부분을 제거하여 성능을 향상시켜 줌.
5. Vite는 빌드도구
- Vite는 번들러가 아닌 빌드 도구.
개발 중에는 번들링을 하지 않고, 파일 단위로 빠르게 처리해주며, 배포 시에만 최적화된 번들을 만들어주는 방식
