Dynamic Import

import 를 사용하여 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어질 수 밖에 없습니다.

ES6에서는 이러한 단점을 보완하기 위해 필요한 스크립트만 가져와서 사용할 수 있도록 Dynamic Import 를 정의하였습니다.

사용법은 간단합니다.

How to use

import('./ImportClass.js');

import 안에 import 할 module명을 넣어 주면 됩니다. 그러면 return 값으로 Promise 객체를 받습니다.

class객체를 이용한 예제는 아래와 같습니다.

export default class ImportClass {
	constructor() {
		console.log('import!');
	}
}
import('./ImportClass').then(importClass.Js=>{
	new importClassJs.default();
});

importClass.js 스크립트에서 default가 class에 선언되어 있으므로

importClassJs.default()로 class 객체를 생성하면 됩니다.

만약에 default 를 선언해주지 않았다면 importClassJs.ImportClass() 로 생성하면 됩니다.

그러면 'import!' 가 console에 출력됩니다.

Reference

[javascript] es6 dynamic import