type=“module” 이라는 형식을 인식하는 브라우저는 nomodule 로 표시된 스크립트는 무시한다. 이는 모듈 시스템을 지원하지 않는 브라우저 대상으로 fallback역할을 할 수 있게 해준다.
모듈 시스템을 인식하는 브라우저라면 이 테이블에 나와있듯이 다른 모던 자바스크립트 기능을 지원함으로 따로 transpile하는 수고를 덜고 용량도 더 낮출 수 있다.
File extensions에 관하여
브라우저에서는 사실 파일 포맷이 크게 상관없다. 왜냐하면 어차피 스크립트 태그에서 자바스크립트로 표기하여 내려받기 때문이다.
하지만 .mjs 라는 포맷이 모듈에 필요한 이유는 다음 두가지 이유이다.
개발 도중에 작성되는 코드가 일반 스크립트가 아닌 모듈 시스템이라고 명확하게 인식된다.
Node.js와 통합될 수 있다.
모듈은 기본적으로 지연된다.
type=“module” 로 선언하면 <script defer> 를 선언한 것과 같이 html parsing을 방해하지 않고, fetch 및 execute 된다.
다른 기능들
Dynamic import
간혹 모듈을 실행과 동시에 다운받지 않고, 필요할때에 따라서 받고 싶은 경우가 생긴다. 이런 행위를 통해서 초기 로드 시간을 줄일 수 있기 때문이다. 모듈 시스템에서 Dynamic Import가 가능하다 !
JavaScript Module
모듈은 JS는 파일간 코드를 import, export 할 수 있게 해준다. 모듈 시스템에는 Nodejs에서 사용하는 CommonJS와 AMD 등이 있는데, 자바스크립트는 이제 표준화된 문법을 가진다.
export
키워드를 이용해서 값을 export할 수 있다.import
키워드를 사용하면 export된 값을 다른 파일에서 사용할 수 있게 된다.모듈 시스템을 이용하면
JS 모듈을 브라우저에서 사용하기
다음과 같이 브라우저가
<script>
태그를 모듈처럼 처리하게 할 수 있다.type=“module”
이라는 형식을 인식하는 브라우저는nomodule
로 표시된 스크립트는 무시한다. 이는 모듈 시스템을 지원하지 않는 브라우저 대상으로 fallback역할을 할 수 있게 해준다. 모듈 시스템을 인식하는 브라우저라면 이 테이블에 나와있듯이 다른 모던 자바스크립트 기능을 지원함으로 따로 transpile하는 수고를 덜고 용량도 더 낮출 수 있다.File extensions에 관하여
브라우저에서는 사실 파일 포맷이 크게 상관없다. 왜냐하면 어차피 스크립트 태그에서 자바스크립트로 표기하여 내려받기 때문이다. 하지만
.mjs
라는 포맷이 모듈에 필요한 이유는 다음 두가지 이유이다.모듈은 기본적으로 지연된다.
type=“module”
로 선언하면<script defer>
를 선언한 것과 같이 html parsing을 방해하지 않고, fetch 및 execute 된다.다른 기능들
Dynamic import
간혹 모듈을 실행과 동시에 다운받지 않고, 필요할때에 따라서 받고 싶은 경우가 생긴다. 이런 행위를 통해서 초기 로드 시간을 줄일 수 있기 때문이다. 모듈 시스템에서 Dynamic Import가 가능하다 !
import.meta ???
퍼포먼스
모듈 시스템을 이용하면 기존에 사용하던 번들러를 사용할 필요가 없게 된다. 다음과 같은 경우에는 추천된다.
하지만 꽤 많은 깊이나 양을 가지는 모듈 시스템은 로딩 퍼포먼스를 위해 번들링을 하는 것을 추천한다.
<link rel="modulepreload">
를 이용해서 모듈내에서 호출하게 될 다른 모듈을 미리 선언하여 미리 fetch하게 하자.multiplexing
을 이용해서 여러개의 요청의 응답을 동시에 처리할 수 있다.