[리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명

- 코드 분할 관련하여 알아두면 좋을 '웹팩'

웹팩: 모든 자원을 번들링 해주는 도구이다.

 

즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다.

자바스크립트뿐만 아니라 모든 CSS 파일도 하나의 번들 파일로 합쳐진다.

 

 

웹팩 페이지를 들어가면 바로 뜨는 사진인데, 사진을 보면 이해가 쉬울 것이다!!

https://webpack.js.org/

 

- 왜 하나로 합쳐야 할까?

브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 포함한다.

이 스크립트가 많아진다면, 네트워크 비용도 높아지고, 병목현상도 생기게 된다. 

즉, 비효율적이게 된다!!

 

웹팩의 장점을 더 알고싶으시다면 공식 페이지를 참고 바랍니다...🤗

Why webpack | webpack

 

 

하지만!! 번들링을 사용하는게 무작정 좋다!!!!라고 말할 수 있는 것은 아니다. ❌❌❌

 

만약 우리가 만든 앱의 규모가 커진다면 번들은 어떻게 될까??

 

 

당연히 번들도 같이 커지게 된다.

바로 당장 필요하지 않은 컴포넌트 정보도 불러오면서 파일 크기가 매우 커지게 된다.

그럼 로딩 시간도 길어지고, 트래픽도 많이 나오게 된다.

 

 

이 문제를 해결 해 줄 수 있는 것이 바로 코드 분할(code splitting)이다.

즉, 번들을 나누자는 것이다. 번들을 나누게 되면, 성능이 획기적으로 향상된다.

앱의 코드 양을 줄이지 않고, 필요하지 않은 코드를 불러오지 않으며 앱의 초기화 로딩에 필요한 비용도 줄어든다.

 

 

코드 분할과 관련된 유틸 함수 React.lazy와 컴포넌트 Suspense가 있으며, 서드파티 라이브러리인 Loadable Components도 있다.

이와 관련된 내용은 따로 포스팅하겠다.

 

[리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components