728x90
Vue 를 공부하기에 앞서 모듈 번들러에 대해 알아보자 !!
번들링(Bundling) 이란 ?
: 여러개의 파일(HTML, CSS, JS 등)을 하나의 파일로 묶어서 브라우저가 더 효율적으로 로드할 수 있도록 만드는 과정
여기서 모듈 번들러의 역할이 번들링을 통해 JS 파일을 하나로 묶는 것임 !
번들링하면 코드 최적화로 중복 제거 등을 통해 성능을 향상 시킬수 있음
1. 모듈 번들러(Module Bundler)
: 여러개의 Javascript 파일을 하나의 파일로 합쳐서 웹 브라우저에서 효율적으로 실행할 수 있도록 만들어주는 도구
- 여기서 Javascript 파일이 모듈에 해당함
- 웹 애플리케이션은 많은 JS 파일을 사용하는데, 브라우저가 대량의 파일을 한 번에 로드하면 속도가 느려질 수 있기 때문에 모듈 번들러를 사용
- 모듈 번들러의 대표적인 종류가 Webpack과 Vite 가 있음
2. Webpack
- 모든 파일을 하나의 번들(bundle)로 묶어서 브라우저에 제공
- 다양한 플로그인을 통해 최적화 가능
- 오래전 부터 사용됨
[ Webpack 을 사용한 번들링 ]
1) 프로젝트 폴더 구조
<bash />/project ├── dist │ ├── index.html │ ├── bundle.js <-- (Webpack이 만들어준 파일) ├── src │ ├── math.js │ ├── app.js ├── webpack.config.js ├── package.json
2) webpack.config.js ( webpack 설정 파일 )
<javascript />
const path = require("path");
module.exports = {
entry: "./src/app.js", // 시작 파일
output: {
filename: "bundle.js", // 출력 파일 이름
path: path.resolve(__dirname, "dist"), // 저장할 폴더
},
mode: "development", // 개발 모드 (배포 시 production으로 변경)
};
3) index.html
<html />
<script src="bundle.js"></script> // webpack 이 만든 하나의 파일만 로드
정리
- src 하위에 위치하는 math.js, app.js 파일을 webpack이 bundle.js 하나로 합쳐줌
- 브라우저가 bundle.js 파일 한번만 로드하면 되므로 로딩 속도가 빨라짐
- 설정이 복잡할 수 있다는 단점 !
3. Vite
- Webpack보다 더 빠르고 가볍게 개발할 수 있도록 만든 번들러
- 개발할 때 번들링 없이 최신 ES 모듈을 그대로 사용
- 처음부터 Vue와 같은 프레임워크를 지원하도록 만들어졌음
- 설정이 간단하고 속도가 빠름
[ Vite를 사용한 번들링 ]
1) 프로젝트 폴더 구조
<bash />/project ├── index.html ├── src │ ├── math.js │ ├── app.js ├── vite.config.js ├── package.json
2) vite.config.js (vite 설정 파일 )
간단히 설정 가능
자세한 내용은 아래 참고
2025.04.03 - [Frontend/Vue] - vite 의 설정 파일 ( vite.config.js )
3) index.html
<html />
<script type="module" src="/src/app.js"></script>
정리
- Webpack처럼 번들링 해주지만, 설정이 훨씬 간단함
- 개발서버가 빠름 ( vite 실행하면 바로 변경 사항 반영 )
- Vue, React 등 최신 프레임워크와 잘맞음
4. 비교
| 번들링 없이 사용 | Webpack | Vite | |
| 속도 | 느림 ( 파일 개수 증가 시 문제) | 빠름 | 매우 빠름 |
| 설정 | 필요 없음 | webpack.cofig.js | vite.config.js |
| 개발 서버 | 없음 | webpack-dev-server | Vite가 자동 제공 |
| 사용 편의성 | 간단하지만 성능 저하 | 설정 복잡함 | 설정 간단함 |
정리
- 간단한 프로젝트 -> 번들링 없이 사용
- 성능 높이고 싶다면 -> 모듈 번들러 사용
- Vue, React 등 최신 프레임워크 사용 -> Vite 와 잘맞음 ( 더 편하고 빠름 )
- -> 지금은 기본설정이 공식적으로 Vite를 선택해서 설치된다
+ ) `ES 모듈을 그대로 사용` 의 뜻 ?
2025.04.02 - [분류 전체보기] - TIL | ES 모듈이란?
TIL | ES 모듈이란?
# 개념 ES 모듈은 ECMAScript(자바스크립트 표준)에서 공식적으로 지원하는 모듈 시스템이다-> js 파일을 여러개로 나누고 필요한 것만 가져다 쓸 수 있도록 도와주는 기능 ! # ES 모듈의 특징
megak.tistory.com
+ ) 모듈 번들러 없이 개발한다는 것은 ?
728x90
