자바스크립트 ES6+ 문법에는 import
가 있습니다. 예를 들어 import func from './func.js'
이런 식입니다.
위의 예제를 정적 import라고 합니다. 정적 임포트에는 단점이 있는데 1) 임포트 구문에 변수 사용이 불가능하다는 점과, 2) if 문등의 분기점에서 사용할 수 없다는 단점이 있습니다.
이러한 정적 임포트의 단점을 해결할 수 있는 것이 동적 임포트(dynamic module import) 입니다. 이것을 사용하면 임포트된 객체 등을 프로미스 형태로 반환합니다.
main.html
파일에서main.js
스크립트를 불러오는데, 브라우저에서import
문을 사용하려면 <script> 태그에서type="module"
이 지정되어야 합니다.add.js
파일에서add
함수를 작성합니다.export
키워드를 추가해 내보낼 수 있도록 모듈화 합니다.main.js
파일에서onClick
함수를 작성합니다. 안에import(경로).then(obj => {...}).catch(err => {...})
를 프로미스 문법으로 사용하면 됩니다.then
부분에서obj
는 아래와 같은 구조를 가지고 있는 변수입니다.
obj.add()
를 사용하여 원하는 모듈을 호출할 수 있습니다.catch
부분에는 모듈 로딩이 제대로 되지 않았을 경우 처리 과정을 작성합니다.
프로미스 기반이므로 onClick
함수를 async
~ await
문으로 바꿀 수도 있습니다.
const onClick = async e => { const module = await import('./add.js') module.add() }
위와 같이 작성해도 동일하게 동작합니다.
동적으로 임포트하도록 하였으므로 버튼을 클릭하기 전에는 add.js
는 로딩되지 않다가 버튼을 클릭하면 그때부터 add.js
가 로딩되기 시작합니다.
이러한 점을 이용해 최신 웹에서 대두되는 코드 스플리팅(code splitting)을 구현할 수 있습니다. 코드 스플리팅이란 SPA에서 모든 코드를 최초 한 번에 내려받지 않고, 필요한 시점에 나눠서 코드를 로딩하는 것을 뜻합니다.