자바스크립트 ES6+: 동적으로 모듈 임포트(import) 하기

자바스크립트 ES6+ 문법에는 import 가 있습니다. 예를 들어 import func from './func.js' 이런 식입니다.

위의 예제를 _정적 import_라고 합니다. 정적 임포트에는 단점이 있는데 1) 임포트 구문에 변수 사용이 불가능하다는 점과, 2) if 문등의 분기점에서 사용할 수 없다는 단점이 있습니다.

이러한 정적 임포트의 단점을 해결할 수 있는 것이 동적 임포트(dynamic module import) 입니다. 이것을 사용하면 임포트된 객체 등을 프로미스 형태로 반환합니다.

https://gist.github.com/ayaysir/321b0c3b486a6d65f62e12c977c8d2da

1. main.html 파일에서 main.js 스크립트를 불러오는데, 브라우저에서 import 문을 사용하려면
2. add.js 파일에서 add 함수를 작성합니다. export 키워드를 추가해 내보낼 수 있도록 모듈화 합니다.
3. main.js 파일에서 onClick 함수를 작성합니다. 안에 import(경로).then(obj => {...}).catch(err => {...}) 를 프로미스 문법으로 사용하면 됩니다. then 부분에서 obj는 아래와 같은 구조를 가지고 있는 변수입니다. obj.add()를 사용하여 원하는 모듈을 호출할 수 있습니다.
4. catch 부분에는 모듈 로딩이 제대로 되지 않았을 경우 처리 과정을 작성합니다.

 

프로미스 기반이므로 onClick 함수를 async ~ await 문으로 바꿀 수도 있습니다.

const onClick = async e => {
    const module = await import('./add.js')
    module.add()
}

위와 같이 작성해도 동일하게 동작합니다.

 

동적으로 임포트하도록 하였으므로 버튼을 클릭하기 전에는 add.js는 로딩되지 않다가 버튼을 클릭하면 그때부터 add.js가 로딩되기 시작합니다.

 

이러한 점을 이용해 최신 웹에서 대두되는 코드 스플리팅(code splitting)을 구현할 수 있습니다. 코드 스플리팅이란 SPA에서 모든 코드를 최초 한 번에 내려받지 않고, 필요한 시점에 나눠서 코드를 로딩하는 것을 뜻합니다.