[TIL] Web bundling - webpack, vite

Web bundling

1.개요

bundling이란 웹 앱의 리소스(HTML, CSS, 자바스크립트 등)를 하나의 파일로 묶는 작업이다.
번들링된 파일은 웹 브라우저에서 다운로드되어 실행된다.

2.상세

bundling을 통해 파일의 개수를 줄이고 다운로드 시간을 줄이며, 코드의 가독성과 유지보수성을 높일 수 있다.
개발된 상태에서의 어플리케이션은 복잡하게 종속된 코드 구성을 가지는데,
이것을 하나의 파일로 묶어 코드 스플리팅(splitting)을 적용할 수 있다.

3.코드 스플리팅

코드 스플리팅이란 초기 로딩 시간을 최적화하기 위해 필요한 부분만 로딩하도록 하는 기술이다.
이는 주로 Webpack, Parcel, Rollup등의 번들러를 이용하여 구현한다.

• Webpack
  번들러로 널리 사용되고 있는 오픈소스로, loader와 plugin을 활용하여 다양한 기능을 구현할 수 있다.
  loader는 리소스를 로딩할 때 실행되는 함수로, 모듈화나 이미지 파일 추출 등 작업이 가능하다.
  plugin은 webpack의 빌드 프로세스를 커스터마이징 할 수 있는 기능을 제공한다.
  이를 통해 HTML파일 생성이나 CSS 파일로 추출하는 등의 작업이 가능하다.
  React, Vue.js, Angular 등의 프론트엔드 프레임워크에서 널리 사용되고 있다.
  
  Parcel은 빠른 빌드 시간으로 간단한 프로젝트나 정적 페이지를 만들 때 유용하고,
  라이브러리나 패키지를 번들링 할 때는 Rollup이나 Webpack이 적합하다.
  
  
• Vite
  Vite는 웹 앱의 빠른 개발을 위해 만들어진 번들러로, Vue.js개발팀에서 만들어졌다.
  개발 서버에서 모듈 번들링을 수행해서 실시간으로 파일을 번들링하고 로딩할 수 있어
  변경사항을 빠르게 확인할 수 있고, 초기 빌드 시간을 줄일 수 있다.
  Vite는 기본적으로 Rollup을 사용하여 유사한 방식으로 동작하지만 더 빠르고 최신 기술을 지원한다.
  때문에 Vite는 단순한 번들러가 아닌 "Next Generation Build Tool"이라는 이름으로도 불린다.
  HMR(Hot Module Replacement)와 같은 수정된 내용을 즉시 확인하게 해주는 기능을 제공하고,
  번들링 결과물이 작으며 다양한 프레임워크와 호환되는 등, 일종의 개발 환경 도구라고 볼 수 있다.