개발하는데 다 이유가 있겠지

Webpack이란?

---

Webpack = 모듈 번들링(Module Bundling)이라고 한다.
(* 모듈 번들링 : html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식)

-> 필요한 여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것

 

왜 Webpack을 사용하는가?

---

• 과거에는 페이지마다 새로운 html을 요청해서 출력하는 방식(Multiple Page Application)이었지만,
  최근에는 하나의 html 페이지에 여러 개의 자바스크립트 파일들이 포함되는 방식(Single Page Application)을 사용한다.
  -> 연관된 자바스크립트 파일들을 하나의 파일로 묶어 관리하기 편해짐
• 파일을 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸림
  -> 여러 파일을 하나의 파일로 번들링해 시간을 줄임
• 하나의 자바스크립트 파일로 만들어서 웹 페이지 성능 최적화를 함
  -> HTTP 요청 수 감소, 코드 압축 및 최적화, 모듈 의존성 관리 등

성능 최적화

1. HTTP 요청 수 감소
웹 페이지 로딩 시, 각 자바스크립트 파일은 별도의 HTTP 요청을 발생시킵니다.파일 수가 많을수록 요청 수가 증가하여 네트워크 오버헤드가 커지고 페이지 로딩 시간이 지연됩니다.번들링을 통해 파일 수를 줄이면 HTTP 요청 수가 감소하여 네트워크 부담을 줄이고 로딩 속도를 향상시킵니다.

2. 코드 압축 및 최적화:
대부분의 번들러는 코드 압축 기능을 제공하여 불필요한 공백, 주석 등을 제거하고 변수명을 짧게 변경하여 파일 크기를 줄입니다.일부 번들러는 코드 실행 순서를 최적화하거나, 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree Shaking) 기능을 통해 추가적인 성능 향상을 제공합니다.파일 크기가 작을수록 다운로드 시간이 단축되어 페이지 로딩 속도가 빨라집니다.

3. 모듈 의존성 관리
현대 웹 개발은 모듈화를 통해 코드를 효율적으로 관리합니다.하지만 모듈 간 의존성이 복잡해지면 로딩 순서를 관리하기 어렵고, 중복 로딩 문제가 발생할 수 있습니다.번들러는 모듈 간 의존성을 분석하여 최적의 로딩 순서를 결정하고, 중복 로딩을 방지하여 효율적인 코드 실행을 보장합니다.

---

장점

1. 다양한 모듈 형식을 지원하여, 웹 페이지 로딩 속도를 개선할 수 있습니다.
2. 자바스크립트 파일 이외에도 CSS, 이미지 등 다양한 파일을 로드할 수 있어, 더욱 풍부한 웹 페이지를 제작할 수 있습니다(로더).
3. 번들링 결과물에 대한 후처리 작업을 수행하여, 최적화 작업 등을 쉽게 수행할 수 있습니다(플러그인).
4.  코드를 적절히 분할하여, 초기 로딩 속도를 개선할 수 있습니다. 또한, 필요한 코드만 로딩하므로, 사용자 경험을 향상시킬 수 있습니다(코드 스플리팅. Code Splitting).
5. 브라우저를 새로고침하지 않고 변경 사항을 즉시 반영할 수 있어, 개발 효율성을 높일 수 있습니다(HMR. Hot Module Replacement).
6. 파일이 변경될 때마다 자동으로 번들링해주므로, 개발자가 번거로운 작업을 줄일 수 있습니다.
7. 브라우저뿐만 아니라 Node.js, Electron 등 다양한 환경에서도 사용할 수 있어, 다양한 프로젝트에 적용 가능합니다.

 

Loader(로더)? Plugin(플러그인)?

---

Webpack은 로더와 플러그인을 활용해 코드를 최적화하고 관리할 수 있다.

로더(Loader)

• 자바스크립트 이외의 CSS나 이미지 등의 다양한 파일을 로드할 수 있음
• CSS나 이미지 파일 같은 것들은 일반적으로 자바스크립트 파일과는 다른 형식으로 작성됨
• 웹팩에서 모듈로 처리하기 위해 자바스크립트 코드로 변환 필요
• 로더를 통해 이런 파일들을 자바스크립트 코드로 변환하는 작업을 수행

-> CSS, 이미지 파일 등 자바스크립트 코드로 변환해 최종적으로 하나의 번들 파일로 묶을 수 있도록 작업을 수행

---

플러그인(Plugin)

• 번들링 결과물에 대한 후처리를 도와주는 역할
• 예를 들어, 웹팩으로 빌드할 때 별도의 프로세스에서 후처리 작업을 수행해 빌드 시간을 단축

-> 모듈 번들링 과정에서 파일을 세부적으로 컨트롤하고, 번들링 결과물에 대한 후처리를 할 수 있도록 도움

 

[번외-1] CRA(Create React App) 대신 Vite를 사용하는 이유?

1. 압도적인 개발 서버 시작 및 핫 리로딩 속도
Vite는 네이티브 ES 모듈을 활용하여 변경된 모듈만 빠르게 업데이트하는 반면, CRA는 Webpack 기반으로 전체 번들을 다시 빌드해야 합니다. 따라서 Vite는 특히 대규모 프로젝트에서 훨씬 빠른 개발 서버 시작 및 핫 리로딩 속도를 제공합니다.

2. 빠른 빌드 속도
Vite는 Rollup을 사용하여 빌드하며, CRA보다 빌드 속도가 훨씬 빠를 수 있습니다. 이는 특히 프로덕션 배포 시 중요한 요소입니다.

3. 유연한 설정
CRA는 편리한 기본 설정을 제공하지만, 사용자 정의 설정을 추가하려면 eject 과정을 거쳐야 합니다. Vite는 훨씬 유연한 설정 옵션을 제공하며, 필요에 따라 다양한 플러그인을 추가하여 기능을 확장할 수 있습니다.

4. 최신 기술 및 트렌드
Vite는 네이티브 ES 모듈, ESM 기반 HMR 등 최신 기술 및 트렌드를 적극적으로 수용하고 있습니다. 이는 개발 생산성 향상 및 미래 기술 변화에 대한 적응력을 높여줍니다.

5. React 생태계의 변화
React Router v6 이상 버전에서는 Vite를 공식적으로 지원하며, 앞으로 React 개발 환경에서 Vite의 중요성이 더욱 커질 것으로 예상됩니다.

결론
CRA는 여전히 간단한 프로젝트를 빠르게 시작하는 데 유용하지만, Vite는 빠른 개발 서버 시작 및 핫 리로딩 속도, 빠른 빌드 속도, 유연한 설정, 최신 기술 지원 등의 장점을 제공하여 특히 대규모 프로젝트 또는 생산성 향상을 추구하는 개발자에게 매력적인 선택지입니다.

 

[번외-2] Vite가 왜 CRA보다 개발 서버가 빠른가?

CRA는 webpack으로 번들링 하는데요.

코드가 바뀌면 모든 자바스크립트 코드를 새로 번들링 합니다.

그래서 앱이 커질수록 HMR(Hot Module Reloading)이 느려지는데요.

Vite는 esbuild를 이용해서 변경된 부분만 새로 번들링 합니다.

물론 Vite도 첫 번째 실행해서 전체를 한 번을 번들링 하는데요.

그 이후로는 변경된 부분만 새로 번들링 합니다.

webpack은 Nodejs로 만들어졌고, esbuild는 Go로 만든 프로그램입니다.

그래서 esbuild가 훨씬 빠르죠.

그리고 CRA는 개발 서버로 express 서버를 돌립니다.

반면 Vite는 Koa라는 조그마한 서버를 돌리는데요.

여기서도 리소스 차이가 꽤 납니다.

Vite가 변경된 코드만 번들링 하는 원리는 Native ESM 모듈을 통해 import나 export 부분을 유심히 관찰하고 어떤 특정 import나 export가 코드가 변경됐다면 그 부분만 번들링 하는 방식입니다.

실제 구현 방식은 변경된 지 않은 모듈은 304 코드인 "not modified"를 리턴해서 브라우저가 그냥 무시하는 방식인 거죠.

Vite는 CommonJS나 UMD 방식을 ESM 방식으로 컨버팅 합니다.

그래서 위와 같이 ESM의 변경된 부분만 선별이 가능한 거죠.

출처 : Vite가 왜 CRA보다 개발 서버가 빠른가?

 

[참고]
프론트엔드 필수 Webpack이란?
쉽게 이해하자, 웹팩(Webpack)이란? - 모듈 번들러(Module Bundler)