JavaScript Module

모듈은 JS는 파일간 코드를 import, export 할 수 있게 해준다. 모듈 시스템에는 Nodejs에서 사용하는 CommonJS와 AMD 등이 있는데, 자바스크립트는 이제 표준화된 문법을 가진다.

export 키워드를 이용해서 값을 export할 수 있다.

// 📁 lib.mjs
export const repeat = (string) => `${string} ${string}`;
export function shout(string) {
  return `${string.toUpperCase()}!`;
}

import 키워드를 사용하면 export된 값을 다른 파일에서 사용할 수 있게 된다.

// 📁 main.mjs
import {repeat, shout} from './lib.mjs';
repeat('hello');
// → 'hello hello'
shout('Modules in action');
// → 'MODULES IN ACTION!'

모듈 시스템을 이용하면

strict mode가 기본이다.
HTML-style 주석을 못한다. <!—
모듈은 lexical top-level 스코프를 가짐으로 global로 바로 노출되지 않는다.

JS 모듈을 브라우저에서 사용하기

다음과 같이 브라우저가 <script> 태그를 모듈처럼 처리하게 할 수 있다.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

type=“module” 이라는 형식을 인식하는 브라우저는 nomodule 로 표시된 스크립트는 무시한다. 이는 모듈 시스템을 지원하지 않는 브라우저 대상으로 fallback역할을 할 수 있게 해준다. 모듈 시스템을 인식하는 브라우저라면 이 테이블에 나와있듯이 다른 모던 자바스크립트 기능을 지원함으로 따로 transpile하는 수고를 덜고 용량도 더 낮출 수 있다.

File extensions에 관하여

브라우저에서는 사실 파일 포맷이 크게 상관없다. 왜냐하면 어차피 스크립트 태그에서 자바스크립트로 표기하여 내려받기 때문이다. 하지만 .mjs 라는 포맷이 모듈에 필요한 이유는 다음 두가지 이유이다.

개발 도중에 작성되는 코드가 일반 스크립트가 아닌 모듈 시스템이라고 명확하게 인식된다.
Node.js와 통합될 수 있다.

모듈은 기본적으로 지연된다.

renderer-main-thread-time-breakdown

type=“module” 로 선언하면 <script defer> 를 선언한 것과 같이 html parsing을 방해하지 않고, fetch 및 execute 된다.

다른 기능들

Dynamic import

간혹 모듈을 실행과 동시에 다운받지 않고, 필요할때에 따라서 받고 싶은 경우가 생긴다. 이런 행위를 통해서 초기 로드 시간을 줄일 수 있기 때문이다. 모듈 시스템에서 Dynamic Import가 가능하다 !

<script type="module">
  (async () => {
    const moduleSpecifier = './lib.mjs';
    const {repeat, shout} = await import(moduleSpecifier);
    repeat('hello');
    // → 'hello hello'
    shout('Dynamic import in action');
    // → 'DYNAMIC IMPORT IN ACTION!'
  })();
</script>

import.meta ???

퍼포먼스

모듈 시스템을 이용하면 기존에 사용하던 번들러를 사용할 필요가 없게 된다. 다음과 같은 경우에는 추천된다.
- 로컬 개발환경
- 100개 이하의 모듈을 가지는 작은 단위의 웹
하지만 꽤 많은 깊이나 양을 가지는 모듈 시스템은 로딩 퍼포먼스를 위해 번들링을 하는 것을 추천한다.
한 파일에서 여러개의 export를 하는 것보다는 한 파일에 하나씩 export해서 사용하지 않는 코드를 내려받지 않게 하자.
<link rel="modulepreload"> 를 이용해서 모듈내에서 호출하게 될 다른 모듈을 미리 선언하여 미리 fetch하게 하자.
HTTP/2 는 쩐다.multiplexing 을 이용해서 여러개의 요청의 응답을 동시에 처리할 수 있다.

codemilli / BTG

1. JavaScript Module #1