자바스크립트) commonJS와 ES Modules의 차이 아시는분

Question

문법의 차이는 당연히 압니다. (require, import 등)특별한 상황이 아닌 이상 두가지 타입을 동시에 사용할 수도 없구요.ES6 스펙과 기존스펙의 차이라는 점도 압니다.하지만 이런 차이밖에 없다면,취향에 따른 취사선택이라는 답밖에 안나옵니다.다만 import의 모듈로딩 시점을 비동기적으로 처리한다는 말을 수많은 구글링결과 확인했는데,그 어떤식으로 실험을 해도 import는 동기적으로 동작했습니다.import가 비동기적인 실행이라 퍼포먼스에서 유리하다는 글을 봤지만 테스트 결과 비동기적으로 실행되어 딜레이를 늦추거나 퍼포먼스를 올리는 그 어떤 증거도 찾을 수 없었습니다.그렇다면 정말 취향에 따른 선택이라는 답밖에 안나옵니다.여기서 질문입니다.import가 비동기적인 로드로 퍼포먼스에 유리하다? 만약 그렇다면 이걸 테스트해볼 증거는?require는 항상 모듈 전체를 불러오고 import는 일부만 불러올 수 있다?(제 경험상 require도 일부만 불러올 수 있는 걸로 알고 있는데...)여러분들의 도움 부탁드립니다...

하얀뼈 · Answer

자문자답합니다.require 는 모듈 번들러(웹팩 등)가 tree shaking 하기 어렵거나 못합니다

코린이듈리 · Answer

우선 질문부터 답변드리겠습니다.import는 비동기적으로 로드할 수 있습니다. lazy-load라고도 합니다.require는 모듈을 가져올때 전체를 다 가지고 옵니다.require는 동기적으로 로드하고 실행해서 성능에 악영향을 줄 수있습니다.그리고 모듈을 가져올 때 전체 모듈객체를 가지고 와서 사용하지 않는 코드가 있어도 트리쉐이킹을 하지 못하고 번들에 포함되어 비효율적일 수 있습니다.import는 비동기적으로 런타임시에 로드가 가능해서 코드분할, 최적화에 이점을 가져가죠 그리고 필요한 부분만 가져올 수 있어 트리쉐이킹이 가능해집니다.아래는 비동기적으로 동작하는 코드입니다.//module.js export function asyncFunction() { console.log('function from module'); } //test.js console.log('동기 로딩 테스트'); (async () => { const module = await import('./module.js'); console.log('비동기 로딩 시작'); module.asyncFunction(); console.log('비동기 로딩 완료'); })(); console.log('동기 로딩 완료');콘솔 찍히는걸 보면 동기 시작 -> 동기 완료 -> 비동기 시작 -> 함수 실행 -> 비동기 완료 순으로 실행되는걸 볼 수있습니다.예를 들어볼까요 SPA로 페이지를 만든다고 가정해 봅시다.페이지가 10개 있는데 첫번째 페이지는 스크립트 로딩이 0.1초, 나머지는 1초가 걸린다고 합시다.만약 비동기 import로 코드 분할을 하지 않으면 첫번째 페이지에서 사용하지도 않는 코드들 때문에 로딩이 10초 가까이 걸리게 되고 아무도 방문하지 않는 페이지가 되겠죠 근데 해당 페이지에 방문 했을때만 스크립트가 로딩되게 하면 오래 걸려봐야 1초밖에 걸리지 않을겁니다.이와같은 이유때문에 비동기로 코드를 import를 해주는겁니다.그리고 보통 라우터를 기반으로 코드를 분할해주고 더 최적화하면더 쪼갤수도 있겠죠.

메이플비 · Answer

import가 promise를 리턴하기 때문에 async이긴 하지만, 일반적으로 최상위 스코프에서 import를 하면 모듈을 불러올 때 parsing phase와 execution phase가 따로 들어갑니다. 그래서 모듈 자체가 로드되어 파싱되기 전까지는 코드를 실행하지 않아서 비동기인지 동기인지 알 길이 없는데, 비동기 함수로 로드를 하면 코드 흐름을 볼 수 있습니다.// asyncModule.js console.log('asyncModule executed'); export const dummyFn = () => { console.log('dummy fn invoked'); };// test.js const asyncImport = async () => { console.log('before module load'); import('./asyncModule').then(({ dummyFn }) => { dummyFn(); }; console.log('after module load'); };위를 실행했을 때 콘솔로그는 순차적으로before module loadafter module loadasyncModule executed그리고 마지막으로 dummyFn invoked가 나옵니다.

자바스크립트) commonJS와 ES Modules의 차이 아시는분

3개의 답변

#module 목록