728x90
1. ES 모듈
# 개념
ES 모듈은 ECMAScript(자바스크립트 표준)에서 공식적으로 지원하는 모듈 시스템이다
-> js 파일을 여러개로 나누고 필요한 것만 가져다 쓸 수 있도록 도와주는 기능 !
# ES 모듈의 특징
- import 와 export 키워드를 사용해 모듈을 가져오거나 내보낼 수 있음
- 브라우저에서 바로 실행할 수 있음 (번들링 없이 사용 가능)
- 기본적으로 비동기 로드(필요할 때 가져오는 방식) 지원
# 기본 ES 모듈 방식 사용 예시
export
<javascript />
//math.js
export function add(a,b) {
return a+b;
}
export const c = 3;
<javascript />
// test.js
export function age(birth) {
return birth+1;
}
import
<javascript />
// main.js
import { add } from "./math.js";
import { age } from "./test.js"
console.log(add(2,3));
console.log(age(1990));
<html />
// index.html
<script type="module" src=main.js"></script>
장점
- export,import 로 필요한 모듈만 가져다쓸 수 있음 -> 코드 최적화
단점
- 파일이 많아질수록 네트워크 요청이 많아져 웹사이트 로딩 속도가 느려질 수 있음
- 캐싱 이슈
- math.js 가 바뀌면 main.js도 다시 받아와야 함
2. Vite 번들링 방식
-> ES 모듈을 최적화해서 사용
Vite의 주요 최적화
1. 의존성(라이브러리) 사전 번들링
Vite 는 처음 실행할 때 node_modules의 라이브러리를 하나의 최적화된 ES 모듈 번들로 변해둔다
( 예시 )
<javascript />
import Vue from 'vue';
- 기본 ES 모듈 방식에서는 vue 내부의 여러 파일을 개별적으로 요청해야 함
- Vite는 Vue 관련 파일을 하나로 묶어서 제공하므로 속도가 훨씬 빠름
2. 동적 import 최적화
- Vite는 동적 import() 를 최적화해서 불필요한 네트워크 요청을 줄임
- Webpack 처럼 미리 번들링 하지 않지만, 필요한 즉시 사용할 수 있도록 캐싱함
3. HMR (Hot Module Replacement) 적용
- 코드가 변경될 때 전체 페이지를 다시 로드하는 것이 아니라, 변경된 부분만 빠르게 교체함
- 기본 ES 모듈 방식에서는 코드가 바뀌면 전체 페이지를 다시 로드해야 함
장점
- 모든 파일을 하나의 번들로 묶어서 한 번에 로드할 수 있으므로 빠른 로딩 속도 제공
- 코드 최적화(압축, 중복 제거, 필요없는 코드 삭제 등) 기능 제공
3. 정리
| 번들링 X ( 그냥 ESM ) | Vite ( ESM 최적화) | |
| 특징 | 브라우저가 파일을 직접 요청 -> 요청 개수가 많아지면 로딩 느림 | - 의존성을 미리 번들링하여 HTTP 요청을 줄이고 실행 속도를 빠르게 함 - 개발 중에도 변경된 코드만 빠르게 반영(HMR) |
728x90
'Frontend > Vue' 카테고리의 다른 글
| defineProps : props 값 전달하기 (0) | 2025.04.07 |
|---|---|
| Vue 템플릿 문법 - Interpolation(보간법) , Directive (0) | 2025.04.04 |
| Vue - index.html 에서 ES 모듈 인식 (0) | 2025.04.03 |
| vite 의 설정 파일( vite.config.js )의 기본설정 (0) | 2025.04.03 |
| Vue 란 ? 간단 개념 및 특징 - 선언적 렌더링과 반응성 이해하기 (0) | 2025.04.03 |
