번들러 내부에 있는 external 옵션의 역할

개요

번들러들이 가지고 있는 external 옵션에 대해 정확하게 모르고 있었습니다.

단순히 번들링 파일에 포함하지 않을 모듈을 정의하는 곳이라고 이해하고 사용하고 있었습니다.

그래서 external에 명시한 모듈을 어떤 방식으로 런타임에 불러오는지 알아보고자 합니다.

 

Rollup - external

external은 번들링 프로세스에서 외부 종속성을 처리하는 방법을 정의하는 옵션입니다.

해당 옵션을 사용하여 특정 모듈을 번들에 포함하지 않고 외부로 유지가 가능합니다.

덕분에 번들의 크기는 줄이고 런타임에 외부 종속성을 로드하게 됩니다.

 

그러면 지정된 외부 모듈은 어디에 요청하는 것일까요?

런타임 환경에서는 일반적으로 패키지 매니저인 npm을 통해서 모듈을 요청합니다.

우리가 package.json 파일에 명시한 종속성 버전에 맞춰서 모듈을 요청하게 되는 것입니다.

Rollup은 번들에 포함되지 않는 외부 모듈에 대해 처리를 담당하지 않습니다.

따라서 외부 모듈의 크기가 커질수록 요청해서 로드할 때까지 시간이 늘어날 수 있습니다.

특히 인터넷이 느리거나 해당 모듈이 너무 많은 의존성을 가지고 있는 경우가 이에 해당합니다.

 

이러한 이유로 대부분의 프로젝트에서는 번들에는 주로 작은 크기의 핵심 모듈이 포함되고, 크기가 큰 외부 종속성은 번들에 포함시키지 않고 런타임에 요청하여 로드하는 방식을 선호합니다.

이렇게 함으로써 초기 페이지 로드 속도를 개선하고 필요한 모듈만 필요한 시점에 로드할 수 있습니다.

 

크기가 큰 외부 모듈을 미리 로드하거나 캐싱이 가능하다고 하는데, 이 부분에 대해서는 아직 잘 몰라서 나중에 더 알아보겠습니다.

예를 들어, 미리 로드되는 모듈을 브라우저의 <script> 태그에 async 나 defer 속성과 함께 추가하여 병렬로 로드되도록 할 수 있다.

 

만약 모듈을 .npmrc 파일을 통해 npm 레지스트리 URL을 수정하여 특정 모듈을 해당 레지스트리에서 받아온다고 하여도 external 옵션은 이에 영향을 받지 않습니다. 때문에 public한 레스스트리에서 받아오는 외부 모듈은 제대로 동작하겠지만 private한 곳에 있는 모듈은 제대로 동작하지 않을 수 있다고 보여집니다. (이는 확실하지 않습니다.ㅠㅡㅠ)

 

마무리하며..

프로젝트를 진행하고 한번 살펴보는데 external 옵션이 눈에 띄어 자세히 알아보게 되었습니다.

현 프로젝트는 내부망을 사용하고 사내 Nexus Repository를 사용하는데 external에 모듈을 지정하는 것이 의미가 있나 생각이 들었습니다.
그래서 저의 결론은 이 프로젝트에서는 external을 정의할 필요가 없다! 입니다.

 

 

끗!