[React] 웹팩 - 코드 스플리팅 과정

일단 거칠게 정리 하겠음

 

웹팩 3의 방식인것 같다. 웹팩 4에서는 App 과 모듈코드가 나눠져서 Chunk 로 자동 생성되는듯..

 

어플리케이션의 규모가 커지게 되면 

용량이 커지게 되고, 로딩속도의 지연이 발생한다.

이걸 방지하기 위해, 번들 파일을 여러개의 파일로 분리 시키는 코드 스플리팅 작업을 해보자

 

 

먼저 코드 스플리팅 을 하기 위해서는 웹팩 및 바벨 환경설정을 밖으로 꺼내줘야한다.

 

 

명령어를 실행해주자

 

이제 웹팩 설정을 직접 할 수 있게 되었다.

 

 

Vendor

 

이제 Vendor 설정을 해줘야 한다.

Vendor 는 전역적으로 사용되는 라이브러리 파일이라고 보면 된다.

 

webpack.config.js 파일을 봐보자

entry  포인트를 배열 [] 에서 객체 {} 형태로 변경해줘야하는데,

 

filter 때문에 변경이 불가능하다

이건 ManifestPlugin 에 entrypointFiles 때문에 발생하는 문제인데,

 

 

이걸 이렇게 변경 시켜줬다.

참고 url : https://stackoverflow.com/questions/58744011/webpack-config-multiple-entry-points-error-with-filter

 

Entry 코드를 변경시켜줬다.

 

설정하기전 

 

설정 후 

 

오히려 안좋아졌다..?

Chunk 가 늘어났다 . 이건 아무래도 웹팩 4에서 .filter(Boolean) 을 억지로 지우면서 발생한 에러인듯

 

여기서 

optimization 의

 

SplitChunks 를 변경해봤다.

 

 

이건 네트워크 탭에서 js 부분만 본건데 불필요한건 사라지고

의미있는 값만 보이게 되었다.

근데 용량들을 보면

결국 app 의 용량을 줄어들지 않고 

chunk의 이름만 vendor 로 바뀐걸 알 수 있다.

 

고로 적용전이랑 다를바가 없다.

이건 아무래도 웹팩 4 에 들어오면서 자동으로 설정이 되도록 변경이 된것같다.