Static Import

import 키워드는 다른 모듈이 export 한 코드들을 import할 수 있도록 해 준다. 기본적으로 정적으로 가져온 모듈들은 초기 번들에 포함된다. import module from 'module' 과 같이 ES2015의 import 구문으로 사용한 코드는 정적으로 가져오게 된다.

아래는 UserProfile, ChatList, ChatInput 을 정적으로 포함하여 사용하고 있는 채팅 앱 예제이다. ChatInput 모듈 내에서 사용자가 이모지를 사용할 때 피커 형태로 제공하기 위해 EmojiPicker 모듈을 정적으로 포함하고 있다.

자바스크립트 엔진은 정적으로 포함시킨 EmojiPicker 모듈을 즉시 실행하기 시작한다. 아래 예제에서 콘솔을 열어보면 로드된 모듈의 순서를 확인할 수 있다.

어떤 컴포넌트가 정적으로 포함될 경우 웹팩은 이 코드를 초기 번들에 포함시킨다. 앱을 번들할 때 아래 메시지와 함께 번들 되는것을 본 적이 있을 것이다.

Asset           Size      Chunks            Chunk Names
main.bundle.js  1.5 MiB    main  [emitted]  main

위의 채팅 앱의 소스코드는 main.bundle.js 라는 하나의 번들에 포함된다. 번들 크기가 커지면 앱이 로딩되기까지의 시간에 악영향을 주며 특히 사용자의 단말 성능이나 네트워크 환경에 따라 더 영향을 줄 수 있다. App 컴포넌트가 화면에 그려지기 전에 먼저 모든 모듈들이 로드되어 파싱이 끝나야 한다.

다행스럽게도 로딩 타임을 줄일 수 있는 다양한 방법들이 있다. 모든 모듈을 하나의 번들에 포함시킬 필요가 없고. 어떤 모듈들은 위 예시에서 EmojiPicker처럼 사용자의 인터렉션에 따라 추가적으로 받게 할 수도 있다. 컴포넌트들을 정적으로 포함하는 대신 App 컴포넌트가 렌더되어 보여지고 인터렉션이 일어남에 따라 동적으로 모듈을 import하는 것이다.