번들링 // webpack

webpack 연습 : https://github.com/studyTS-bam/webpack-prac

 

가이드를 따라서 연습하면서 각각의 커밋을 통해 각 챕터를 나눠서 해봤다.

 

 CRA와 barbel을 알고 있었음에도 그 동작원리에 대해서 자세히 보지 않은 것에 대해서 이제와서라도 보게 된것에 다행이라는 생각이 든다. 번들링이 어떤 작업을 하는지.. CRA가 왜 좋은지에 대한 생각이 많이 들었다.

 프로젝트의 성능 최적화를 하기 위해서 '코드 스플리팅'에 대하여 공부하다가 webpack까지 와서 공부하면서 개발을 할 때에 고민해야 하는 점이 더 늘게 되어 기쁘다.

 아는만큼 보인다고 했었던가, 점점 보이는 것이 늘어가고 공부할 것이 늘어가는 것 또한 얼마나 설레이는 일인지.

 

 

리액트의 번들링 관련되어 아래 글을 참고해서 공부했고, 아래 글에 나오는 webpack에 대한 궁금증은 앞서 글에서 설명한 것처럼 webpack 공식문서를 활용하여 공부했다.

성능 최적화 1 — 번들 크기 줄이기 (React, Webpack, Minify, Code Splitting)

 

어떤 경우에 CRA에서 webpack으로 추가적인 번들링 작업을 해줘야 하는지에 대한 지피티의 대답

 

최신 버전의 Create React App (CRA)는 내부적으로 webpack을 사용하여 애플리케이션을 번들링합니다.

그러나 CRA는 모든 상황에서 최적의 번들링 설정을 제공할 수는 없습니다. 다음과 같은 몇 가지 이유로 인해 사용자는 CRA가 생성한 기본 설정보다 더 나은 번들링 최적화를 위해 webpack을 사용할 수 있습니다.

 

① 추가적인 로더 및 플러그인 사용:

  CRA는 이미 여러 개의 로더와 플러그인을 사용하여 번들링을 최적화하고 있지만, 사용자의 프로젝트에 따라 추가적인 로더나 플러그인이 필요할 수 있습니다. 이 경우 CRA가 제공하지 않는 로더나 플러그인을 webpack 설정 파일에 추가하여 사용할 수 있습니다.

② 번들 크기 최적화:

  CRA는 기본적으로 코드 스플리팅과 gzip 압축을 지원하지만, 사용자의 프로젝트에 따라 추가적인 번들 최적화가 필요할 수 있습니다. 예를 들어, webpack을 사용하면 UglifyJS나 Terser와 같은 코드 최적화 도구를 사용하여 번들 크기를 줄일 수 있습니다.

③ 특정 환경에 맞는 번들링:

  CRA는 기본적으로 개발 환경과 프로덕션 환경에서 동일한 webpack 설정을 사용합니다. 하지만 특정 환경에 맞는 번들링 설정이 필요한 경우, webpack 설정 파일을 직접 작성하여 해당 환경에 맞는 설정을 적용할 수 있습니다.

 

 이러한 이유로 인해, CRA를 사용하더라도 사용자는 필요에 따라 webpack을 사용하여 번들링 최적화를 직접 수행할 수 있습니다. 이 경우 CRA는 여전히 개발용 서버나 빌드 스크립트 등을 제공하여 개발 과정을 보다 편리하게 만들어줄 수 있습니다.

하하 또 모르는 것 투성...to be continue다..