동일한 파일을 여러 번 Dynamic Import하면?

React Router Dom을 사용하면서 loader라는 기능을 이용하고 있었어요. loader는 해당 경로에 대해 요청이 오면 컴포넌트 렌더링과 데이터 패칭 작업을 같이 할 수 있게하는 기능입니다.

컴포넌트는 lazy하게 불러오고 있었고, loader 역시 dynamic import를 통해 가져오고 있었어요.

const PageA = lazy(() => import('@Pages/PageA').then((module) => 
  ({ default: module.default }))
);

<Route index Component={PageA} loader={
  (await import('@Pages/PageA')).loader
} />

그러면 궁금해지는 것이~ 사실 같은 파일을 불러오는 셈이잖아요? import()의 작업이 끝나면 해당 파일의 청크가 생성이 되고, 그 청크에서 default만 가져오고, loader만 가져오는 거니까, 결국엔 파일 전체를 읽는 행위는 마찬가지 아닌가 싶은 생각이 들었습니다.

해당 청크가 캐싱되어 이후의 import는 캐시를 사용한다고 해도, 그렇다면 저렇게 dynamic import로 불러올 필요가 없는 것 아닌가? 싶은 생각이 들었습니다.

이에 대해서 새로운 멘토 선생님 Claude 님에게 물어보았습니다.

당신의 칭찬 날 춤추게 해

필요한 부분만 발췌를 해보면 다음과 같아요.

• 초기 로딩 시간과 전체 로딩:

  • 동적 import의 주요 목적은 초기 로딩 시간을 줄이는 것입니다. 필요한 시점에 필요한 코드만 로드함으로써 애플리케이션의 초기 로딩 속도를 향상시킵니다.
  • 파일이 한 번 로드되면, 추가적인 동적 import는 이미 로드된 모듈을 재사용합니다. 이는 맞습니다.

• 트리 쉐이킹과 최적화:

  • 모던 번들러들은 트리 쉐이킹을 통해 사용되지 않는 코드를 제거합니다. 동적 import를 사용하면 이러한 최적화를 더 효과적으로 수행할 수 있습니다.

• 성능과 메모리 사용:

  • 파일이 이미 로드되었다 하더라도, 모든 export를 메모리에 유지하는 것보다 필요한 부분만 참조하는 것이 메모리 사용 측면에서 효율적일 수 있습니다

즉, 같은 파일이라면 최초 import 시에 파일에 대한 청크를 생성하고, 해당 청크에서 default와 loader를 가져오는 것이 맞아요. 다만 동적 import은 런타임 시에 파일 전체에 대해 청크를 생성하기 때문에, 트리 쉐이킹이 효율적으로 이루어 질 순 없다. 그렇지만서도 필요한 부분만 메모리에 올리는 게 효율적일 수 있다! 정도로 정리할 수 있겠네요.

아이참 뭘 이 정도 가지고~;;;

---

ChatGPT보다 Claude가 코딩 데이터가 많다고 해서 써본 건데, 저런 식으로 유저와 대화를 하고 있다는 인터렉티브 메시지가 많아서 더 끌린다. 짜식..