webpack chunk

상황

1. webpack require.context 구문을 통해서 중첩된 깊이 있는 파일들을 간단하게 import 해서 사용할 수 있도록 설계

(파일을 어디에 어느 깊이에 존재하든지 간편하게 동일한 depth에서 import)

2. 최상위 url 레벨에서 페이지별로 동적 import 사용하여 chunk

(페이지를 기준으로 코드 분할)

 

문제

동적 import 가 사용되기전 require.context로 동적으로 export 시킨 파일들을 사용할 경우 페이지별 chunk 가 되지 않음

 

원인

동적 import 구문 전에 이미 require.context 구문으로 export 파일들을 단 하나라도 사용하면 동적 import 구문 해석 전에 이미 모든 파일이 구문 해석이 완료되어 더 이상 새롭게 chunk할 코드가 없다.

 

해결

1. require.context 구문으로 해석된 위치에서 사용하지 않고 절대 경로로 직접 사용한다.

2. 동적 import 보다 먼저 동적 import 해준다. page별로 나눴다면 그 보다 상위지점에서 동적 import 해준다.

 

해결 1 은 실제로 사용하기 힘든데 그 이유는 직접 경로로 사용하는 모듈의 의존 코드들도 require.context 구문을 통한 import 가 없는지 모두 확인해줘야 하기 때문이다.

 

해결 2 로도 기대와는 달리 모든 page별로 chunk되지 않았다. 모든 page에서 거의 동일한 모듈들을 사용하고 있기 때문이다.

 

chunk split은 실제로 사용하는 모든 코드들의 의존 관계를 파악하고 쪼개는 작업인데 쪼개는 위치에서 각 모듈들이 모든 곳에 사용된다면 사실상 chunk될 필요가 없으며 되며 실제로도 chunk되지 않는다. chunk 되지 않는다는 것은 어떤 면에서는 잘 설계 했다고도 볼 수 있다. 재사용성이 높은 시스템으로 디자인되었다고 볼 수 있기 때문이다.