[Javascript] module 동적 import

레퍼런스

ESModule을 동적으로 import 하기

Speed Up Your React Apps With Code Splitting

---

설명 / 정의

대부분의 경우에는 파일 상단에 필요한 모듈들을 static하게 import하는 것이 일반적이지만, 때때로 이를 필요에 따라 조건부로 불러올 수도 있다. dynamic import라고 불리며, 이는 ES2020(ES11)에 포함된 기능이다.

// test.js
export const sum = (a, b) => a + b

// 상단에서 정적으로 import 하는 경우 
import { sum } from './test'

// 하단에서 동적으로 import 하는 경우
const sum = await import('./test')

// default와 그 외 함수들이 섞여 있는 경우
const { default: sum, sum1, sum2 } = await import('./test')

await import는 프로미스를 리턴하고 이 때부터 동적으로 모듈을 불러오기 시작한다. 그리고 모듈을 성공적으로 불러오면, promise는 모듈을 resolve하거나 실패할 경우 reject 하게 된다.

---

추가 정보

await 없이 정석적인 방식으로 import 해온 결과물(promise 객체)을 다룬다면 이런 방식이 될 것이다.

// test.js
export condst sum = (a, b) => a + b
exoprt default mul = (a, b) => a * b

// 동적으로 import 하는 경우
const sum = import('./test').then(module => {
	module.sum
}
const sum = import('./test').then(module => {
	module.default
}
const sumOfTwoAndTwo = import('./test').then(module => {
	module.sum(2, 2)
}