FE 개념 정리 - 웹팩(webpack)의 기능

그레이쁘·2023년 4월 25일
0

Today I Learned

목록 보기
3/3

웹팩이란?

자바스크립트 애플리케이션을 위한 모듈 번들러

효율적인 모듈관리와 코드 최적화를 가능하게 한다.

모듈 번들러(module bundler)란?

여러 개의 모듈로 구성된 프로젝트를 하나의 파일로 묶어서 사용하는 도구

웹팩의 기능

1. 모듈번들링

  • 여러 개의 자바스크립트 모듈 파일을 하나의 파일로 번들링
  • 코드 스플리팅(code splitting) 기능을 통해 애플리케이션 로딩 속도 개선

2. 로더(Loader)

  • 다양한 파일 포맷(CSS, SCSS, 이미지 등)을 웹팩이 이해할 수 있는 자바스크립트 모듈로 변환
  • 로더를 사용해 자바스크립트 코드에 대한 다양한 전처리 수행 가능

3. 플러그인(Plugin)

  • 번들링 이후에 추가적인 작업을 수행할 수 있는 확장 기능
  • CSS 파일을 별도의 파일로 추출, 번들링된 파일을 압축하는 등의 작업 수행 가능

코드 스플리팅이란?

애플리케이션을 구성하는 코드를 여러 개의 파일로 분리하여 필요한 코드만 로딩하도록 하는 기능

대부분의 웹 애플리케이션은 큰 용량의 자바스크립트 파일을 포함하고 있으며, 이러한 파일을 전체 다 로딩하게 되면 초기 로딩 시간이 늘어나고 사용자 경험에 악영향을 줄 수 있다.
한 페이지에 관련된 모든 코드를 하나의 자바스크립트 파일로 묶어두면 페이지 로딩 시간이 길어지고, 모든 코드를 한 번에 다운로드하기 때문에 대역폭이 많이 사용된다.

이 때 코드 스플리팅으로 실제로 필요한 코드만 로딩하게 되면 초기 로딩 시간을 단축하고, 대역폭 사용량을 줄일 수 있으며 사용자 경험을 개선할 수 있다.

웹팩에서는 코드 스플리팅을 위해 Dynamic Import 기능을 지원한다.
이 기능을 사용하면 애플리케이션 로딩 시점에 필요한 모듈만 동적으로 로딩할 수 있어 쉽게 코드 스플리팅을 구현할 수 있다.

profile
그냥 걷는 사람🚶‍♀️

0개의 댓글