KAKAO 기술 블로그를 읽고 요약합니다.

1. 배경

FE플랫폼 팀에서 Google의 Lighthouse를 활용해 웹 서비스를 주기적으로 분석하는 서비스 Pharus를 운영. Lighthouse가 올해 버전 10과 11이 출시되었으므로 Pharus에서 Lighthouse의 신규 버전(10버전)을 적용하여 업데이트 하는 것이 목표.

• Lighthouse : 구글에서 만든 정적 성능 분석 도구로 Chrome환경에서 웹 서비스에 성능 정보를 수집하고 리포트를 생성함. 꾸준히 업데이트 되는 라이브러리로 10 버전에서 Typescript 지원, ESM 전환 등의 변화가 생김.

• Pharus는 Lighthouse를 활용해 6시간마다 웹 서비스 성능을 측정하고 변화를 편하게 파악하도록 함. 인증처리 같은 설정을 지원.

2.ESM 동작 원리

ESM은 구성, 인스턴스화, 평가의 3단계로 동작함.

1.구성: 모듈의 리소스를 가져오고 구문 분석을 수행.

2.인스턴스화: 각 모듈이 가져오고 내보내는 변수의 메모리 주소를 할당 및 공유.

3.평가: 코드를 실행하면서 메모리에 값을 채움.

CommonJS는 모든 모듈을 순회하면서 각 단계를 동기적으로 수행하지만, ESM은 비동기적으로 각 단계를 수행함. 따라서 모듈 최상위 레벨에서 사용할 수 있는 top level await이 가능해지므로 전체 파일 로드에 대한 성능을 향상할 수 있음.

3. Node.js Loader

모듈 시스템은 브라우저나 Node.js가 동일한 스펙을 적용함. 그러나 모듈 파일을 실제로 가져오는 Loader는 플랫폼별로 각자 다른 스펙으로 구현됨. Node.js는 여러 개의 Loader를 사용할 수 있도록 Loaders API를 제공함.

4.마무리

Typescript를 사용한다면 ESM 문법으로 컴파일하는 과정을 포함해야 하고, ts-node, jset 를 사용하면 Loaders API를 써야 함.

느낀점

JavaScript에서 Typescript로 넘어가는 추세이고 ESM을 많이 지원하다 보니 생태계가 바뀌어 가고 있음을 느낍니다.

• 링크: https://tech.kakao.com/2023/10/19/commonjs-esm-migrati