FE

webpack-> Vite의 인기가 급증하는 이유

올바른생활부터 2024. 3. 31. 21:45
728x90
반응형
SMALL

번들러에 대한 개념 없이 무작정 사용하고 있어 본문에서는 번들러에 대해 알고보고자 한다.

먼저, webpack무엇인지 알기전에 컴파일러와 번들러에 대해 살펴보자.

  • 컴파일러는 번들러를 사용하여 브라우저에서 사용할 수 있도록 여러 JavaScript 파일을 하나의 실행 파일로 결합한다.
  • 번들러에는 앱을 실행하는 데 필요한 전체 소스 코드와 모든 종속성이 포함되어 있다.
  • 이 글에서는 두 가지 번들러에 대해 살펴보겠다.
목차

1. 번들러란 무엇인가?

2. Webpack이란?

3. Vite란?

4. Vite vs Webpack

5. 결론

1. 번들러란 무엇인가?

  • 번들러는 브라우저가 기본적으로 지원하지 않는 타입스크립트나 SCSS 같은 언어로 작성된 코드를 원활하게 통합하여 개발 및 프로덕션 workflow 를 개선하는 도구이다. 즉, 개발 및 프로덕션 환경에 효과적으로 적합하도록 코드를 최적화하고 구성한다.

  • Webpack 번들러는, NPM 저장소에서 매주 수백만 건의 다운로드가 이루어지는 강력한 커뮤니티의 지원을 받고 있었다. 그러나 더 많은 다양성을 도입하고 번들링 시간 문제를 해결하기 위해 새롭게 떠오르는 기술인 Vite가 주목을 받고 있다. Vite는 Webpack의 번들링 시간 문제를 해결하고 흥미로운 기능을 추가로 제공한다.

2. 웹팩이란?

  • 웹팩은 정적 모듈 번들러이다. 웹팩의 주요 목적은 웹 프로젝트의 리소스를 브라우저에서 다운로드할 수 있는 관리 가능한 수의 파일로 결합하는 것이다. 그렇다고 해서 프로젝트의 모든 파일이 즉시 로드되는 것은 아니며, 필요에 따라 파일을 다운로드할 수 있다.
  • 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

Webpack 사용의 장점

  1. 로더 및 플러그인: 웹팩은 꽤 오래된 도구이기 때문에 다양한 파일 유형, 타사 라이브러리 및 프레임워크를 지원한다.
  2. 코드 분할: 웹팩은 코드 분할을 허용한다. 이 기능을 통해 개발자는 코드를 필요에 따라 로드할 수 있는 작은 덩어리로 분할하여 초기 번들 크기를 줄이고 페이지 로드 시간을 개선할 수 있다.
  3. 사용자 정의 구성: Webpack에는 개발자가 프로젝트별 요구 사항에 따라 번들링 프로세스를 미세 조정할 수 있는 광범위한 구성 옵션이 있다.

3. Vite란?

  • Vite는 속도 면에서 웹팩보다 성능이 뛰어나다. Vue.js의 창시자인 Evan You가 개발했다. Vite는 네이티브 ES 모듈 지원과 같은 최신 브라우저 기능을 활용하여 개발 중 기존 번들링의 오버헤드를 제거하도록 설계되었다.

Vite 사용의 장점

  1. 핫 모듈 교체가 가능한 개발자 서버: Vite의 개발자 서버는 HMR의 강력한 기능을 사용하여 매우 빠른 핫 모듈 교체를 제공한다.
  2. ES 모듈 기반 번들링: Vite는 최신 브라우저에서 ES 모듈(ESM)을 지원하여 개발 중에 개별 파일을 제공하므로 시작 시간이 빨라지고 개발 오버헤드가 줄어든다.
  3. 최적화된 빌드 프로세스: Vite는 내부적으로 roll up 을 사용하여 프로덕션 build를 생성하므로 build크기가 작아지고 로드 시간이 개선된다.

4. Vite vs Webpack

웹팩을 선호하는 경우

  • 많은 customize를 하고 싶고, 바인딩 프로세스를 완벽하게 제어하고 싶은 경우
  • 다양한 타사 라이브러리, 도구 및 프레임워크를 사용하려는 경우

Vite를 선호하는 경우

  • ESM 지원을 사용하여 최신 JS 애플리케이션을 개발하려는 경우
  • 주로 중소규모 프로젝트에서 개발 및 빌드 속도가 최우선인 경우

5. 결론

  • Vite와 Webpack은 최신 자바스크립트 개발의 다양한 요구 사항을 충족하는 매우 강력한 빌드 도구이다. Vite는 빠른 개발과 빌드 속도를 강조하며 네이티브 ESM 지원을 활용하는 프로젝트에 이상적이고, 반면 Webpack은 단순한 앱부터 기업의 해결책까지 다양한 프로젝트에 적합한 탁월한 유연성과 사용자 지정 기능을 제공한다.
  • 현재 Next.js 및 Create React App과 같은 인기 있는 프로그램에서 Webpack을 사용하고 있지만, 개발자들 사이에서 인기를 얻고 있는 Vite가 개발자 커뮤니티에서 널리 수용될 가능성이 커지고 있다.
  • Vite와 Webpack 중 어떤 것을 선택할지는 프로젝트 요구 사항에 따라 달라진다.

참고

728x90
반응형
LIST