Webpack의 runtime 옵션

👀 Runtime

🔍 runtime code

자바스크립트 코드가 실행될 때마다 필요한 코드를 말합니다. 모듈시스템, 코드분할, 캐싱 및 코드 실행 환경과 같은 기능을 지원하기 위해 필요합니다.

웹팩에서 'runtime' 옵션으로 설정되며, 'runtimeChunk'옵션을 사용해 별도의 파일로 분리할 수도 있습니다.

🔍 Option

1. single(default)
   모든 런타임 코드를 하나의 파일에 포함시킵니다. 이 경우 큰 프로젝트에서는 번들 파일이 너무 커질 수 있습니다.

2. multiple
   런타임 코드를 여러 개의 파일로 분할합니다. 더 작은 번들 파일을 생성할 수 있지만, 추가 HTTP 요청이 필요해져 로딩시간이 늘어날 수 있습니다.

3. split
   런타임 코드를 여러 개의 파일로 분할하며, 각 파일은 필요한 모듈만 포함합니다. HTTP 요청을 줄이면서 작은 번들 파일을 생성할 수 있습니다.

4. automatic
   런타임 코드를 자동으로 처리하며, 추가 HTTP 요청을 줄이고 번들 파일 크기를 최소화합니다. 이전의 'runtimeChunk'옵션을 사용해 런타임 코드를 분리했을 때 빌드된 파일의 크기가 커지는 단점을 보완하기 위해 추가되었습니다. automatic 옵션은 모듈이 변경되어도 런타임 코드가 변경되지 않으므로 캐시 무효화 문제가 해결되는 이점도 가집니다. 웹팩 빌드 속도와 번들 파일 크기를 최적화하고 런타임 코드를 더 효율적으로 처리합니다.