[javsscript] es6 dynamic import

이전 포스팅에서 import와 export 사용법을 설명했다.

하지만 import를 선언하면서 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어질 수 밖에 없다.

es6에서는 이점을 보완하기 위해 필요한 스크립트만 가져와서 사용하도록 dynamic import를 정의했다. 

사용법은 간단하다.

import('./ImportClass.js');

위와 같이 import안에 import할 module명을 넣어 주면 된다. 그러면 return 값으로 Promise 객체를 받는다.

이제 class 객체를 생성하여 사용해보자.

export default class ImportClass {
    constructor() {
        console.log('import!');
    }
}

import('./ImportClass').then(importClassJs => {
    new importClassJs.default();
});

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

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

default를 선언해주지 않았다면 importClassJs.ImportClass()로 생성해주자.

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

생성한 class객체를 변수에 할당하여 내부함수를 사용하면 된다.

이전 포스팅에서 소개한 export.js의 객체들은 다음과 같이 사용하면 된다

import('./Export.js').then(({default: consoleFunction, exString}) => {
    consoleFunction(exString);
});

multiple dynamic import

개발을 하다보면 같은 시점에 필요한 module이 생기기 마련이다.

그렇다면, 이 module을 동시에 dynamic import로 가려오려면 어떻게 해야 할까

물론 다음과 같이 단순하게 처리할 수 있다.

import('./ImportClass1.js').then(importClass1Js => {
    import('./ImportClass2.js').then(importClass2Js => {
        import('./ImportClass3.js').then(importClass3Js => {
            new importClass1Js.ImportClass1();
            new importClass2Js.ImportClass2();
            new importClass3Js.ImportClass3();
        });
    });
});

이렇게 하면 파일이 많아지면 depth가 많아 지고 자연스럽게 가독성이 떨어질 수 있다. 

es8 문법을 빌려 async, await를 활용해보자.

async function getImportModules(){
    const importModules = [];
    importModules.push(await import('./ImportClass1.js'));
    importModules.push(await import('./ImportClass2.js'));
    importModules.push(await import('./ImportClass3.js'));
    return importModules;
}

getImportModules().then(([class1, class2, class3]) => {
    new class1.default();
    new class2.default();
    new class3.default();
});

async, await는 비교적 최신 문법이므로 지원이 안될 수 있다. 

Promise 객체를 이용해보자

Promise.all([
    import('./ImportClass1.js'),
    import('./ImportClass2.js'),
    import('./ImportClass3.js')
]).then(([class1, class2, class3]) => {
    new class1.default();
    new class2.default();
    new class3.default();
});

이 dynamic import를 사용하여 웹페이지 로딩 시간을 좀 더 줄여보자.