[ASAC 06] Javascript 프레임워크 동작원리(2) - Bundling & Code Splitting

이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.

 

Bundling & Code Splitting

자바스크립트 파일이 여러 개일 경우에, N개의 자바스크립트 파일을 각각 전송하게 된다면 N번의 네트워크 사용이 발생한다. 이는 매우 비효율적이다.

번들링(Bundling)은 N개의 자바스크립트 파일을 1개의 파일로 압축시키는 것이다. 하지만 용량이 매우 커진다는 단점이 존재한다. 전송 파일의 용량이 너무 커도 네트워크 효율에 좋지 않다.

이를 개선하기 위해서 코드 스플리팅(Code Splitting) 을 함께 사용한다. 코드 스플리팅은 번들링한 것을 다시 쪼개는 것이다.

Code Splitting 기준

1. 보고자 하는 페이지에 필요한 코드들만 묶음
   그러면 한꺼번에 모든 코드를 다운로드할 필요가 없음
   -> 현재 보고자 하는 페이지에 맞는 코드만 다운로드

2. 라이브러리의 사용 여부
   -> 다운로드 받은 라이브러리가 개발 환경에서만 사용하는 라이브러리이거나, 아예 사용되지 않는 라이브러리일 경우 번들링에서 제외시킨다.(전송하지 않는다.)

3. 컴포넌트 사용 여부에 따른 다이나믹 로딩(Dynamic Loading)
   ux를 높이기 위해서 필요한 부분(현재 사용해야할 부분)만 먼저 다운로드해서 미리 보여줌.
   파일이 다운로드되는 순서는? 서스펜스 순서는 개발자가 결정할 수 있다.
   원하는 컴포넌트를 언제 가져올 지에 대해서도 컨트롤이 가능하다.
   ex) 뷰포트가 노출되지 않았을 때는 보여주지 않는다. 무한 스크롤 때 다이나믹 로딩 사용

번들러 - Weback, Vite

• Webpack  : 세부 설정을 통해 각 페이지별로 정의 및 연결된 모든 JSX들을 한데 묶어 번들링 가능
  • Code Splitting : 페이지마다 묶어서. 매 페이지 접근 시마다 전체 번들링 JS를 가져오지 않도록 한다.
  • JS, HTML, CSS, SVG까지(FE 리소스) 모두 번들링 할 수 있다.
  • 프론트엔드 프레임워크 사용 시 웹팩은 프레임워크에 내장되어 있다.
• Vite  : 자동으로 각 페이지별로 꼭 필요한 JSX 및 라이브러리 모듈들만 번들링한다.
  • esbuild 확장 도구
  • Code Splitting = Dynamic Import : 메인 페이지 내 서브 페이지마다 필요한 라이브러리만 번들링