웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.
모듈 번들러는 다음과 같은 장점이 있습니다.
여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.
모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽습니다.
최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 줍니다.
Vite
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구입니다.
Vite를 사용해야 하는 이유
Vite를 사용하기 이전 문제점
브라우저에서 ESM(ES Modules)을 지원하기 전까지는, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다.
따라서 개발자들은 "번들링(Bundling)"이라는 우회적인 방법을 사용할 수 밖에 없었죠.
( 번들링: 모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업)
자바스크립트 코드 수가 증가하면서, 서버 구동에 걸리는 시간이 느려졌습니다.
vite는 이 문제를 dependencies 그리고 source code 두 가지 카테고리로 나누어 개발 서버를 시작하도록 함으로써 해결했죠.
느렸던 소스 코드 갱신, 배포 시에 필요한 번들링 과정을 위해서 vite를 사용해야 합니다.
Vite에 대한 조사
웹팩
웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.
모듈 번들러는 다음과 같은 장점이 있습니다.
Vite
Vite를 사용해야 하는 이유
Vite를 사용하기 이전 문제점
vite는 이 문제를 dependencies 그리고 source code 두 가지 카테고리로 나누어 개발 서버를 시작하도록 함으로써 해결했죠.
느렸던 소스 코드 갱신, 배포 시에 필요한 번들링 과정을 위해서 vite를 사용해야 합니다.
Vite를 사용해야 하는 이유.