프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이다.
기존 회사에서는 Webpack을 사용했었는데, 새로운 회사에서 Vite를 사용하게 되었다. 그 김에 둘 사이에 무슨 차이점이 있는지 정리해보려고 한다
모듈 시스템 : 목적이나 기능에 따라 코드를 분리하는 것
모듈 번들러 : 이처럼 분리된 코드 조각들을 하나의 파일로 병합하는 개발 도구
-> 즉 모듈 번들러란 JavaScript 모듈을 브라우저에서 실행할 수 있는 단일 JavaScript 파일로 묶는데 사용되는 도구이다.Module(분리된 코드 조각) + Bundler(묶는다)
모듈 번들러는 크게 세 가지 이유로 사용된다.
- 모든 브라우저가 모듈 시스템을 완전하게 지원하지 않는다.
- 코드의 종속성 관계를 관리하는데 도움이 되며 종속성 순서대로 모듈을 로드한다.
- 이미지 에셋, css 에셋 등 종속성 순서대로 에셋을 로드하는 데 도움이 된다.
최근에는 번들러 자체에서 개발과 빌드, 최적화를 위한 각종 플러그인을 제공하고 있으므로 별도의 최적화 도구를 사용하지 않아도 되게 되었다. 이것이 바로 모던 웹 애플리케이션을 작성할 때 일반적으로 별도의 추가적인 툴을 사용하지 않는 이유이다.
대표적인 모듈 번들러로는 Webpack, Pacle, Rollup이 있다.
Webpack
Webpack은 Entry 포인트를 시작으로, 의존적인 모듈을 전부 찾아내서 하나의 파일로 번들링을 해줍니다.
기능
- CommonJS, AMD, ES6 Module 포맷을 모두 지원합니다.
- JS 뿐만 아니라 CSS, Image 등의 복잡한 의존성을 관리합니다.
- 성능 최적화
- 사용하지 않는 코드를 제거하는 Tree Shaking 같은 최적화를 수행합니다.
- HTTP 요청 수가 감소하여 네트워크 비용이 감소됩니다. - Code Splitting
- 원하는 때에 모듈을 로딩할 수 있는 Dynamic Loading, Lazy Loading이 가능합니다.
장점
- 로딩에 대한 네트워크 비용이 감소됩니다.
- 모듈 단위로 개발이 가능하기 때문에 가독성이 높아지고 유지보수가 쉽습니다.
- 최신 JS 문법을 지원하지 않는 브라우저에서도 사용할 수 있습니다.
- Webpack의 기능과 장점에 대해서 알아보았습니다.
Webpack vs Vite
Vite란 이름의 뜻 그대로 "빠른" 자바스크립트 번들링 툴으로, esbuild 번들링을 통해 개발 환경에서 높은 속도를 자랑합니다.
Webpack과 Vite의 차이점
개발 서버
Webpack: 소스 코드와 모든 종속 관계의 모듈을 번들링 한 후 서버가 준비됩니다.
Vite: esbuild로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동됩니다.
dev-server ready time(보일러 플레이트 기준): Vite(1.8s) > Webpack(7.8s)
프로덕션 빌드
Webpack: 각 모듈을 범위마다 함수로 맵핑하여 결합합니다.
Vite: 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합합니다. 중복을 제거하기 때문에 가볍고 빠르게 빌드할 수 있습니다.
