Modern JavaScript로 Publish

사실 여기에 대해 의문을 가져본 적이 없었다. "프로덕션용 애플리케이션은 ie11을 포함한 최대한 많은 브라우저를 지원해야하므로 es5로 publish 해야지."라고만 생각했다. 특히 ie11에 대해서는 정말 맞는 말이지만, 이것으로 인해 쉽게 얻을 수 있는 성능 향상의 기회를 놓치고 있다.

TLDR ES2017로 publish 하자

Modern Browser

흔히 Chrome, Safari, Edge, Firefox 같은 최신(modern) 웹 브라우저를 말한다. 특히 앞에서 언급한 4개의 브라우저의 경우 브라우저 시장의 90% 이상을 차지하며, 동일한 렌더링 엔진에 의존하는 다른 브라우저 5%를 추가하면, 전 세계 웹 트래픽의 95%가 위 브라우저이나, 위 브라우저 기반이라고 할 수 있다.

Modern JavaScript

모던 자바스크립트란, 특정 ECMAScript 사양 버전으로 작성된 자바스크립트 코드를 의미하지 않으며, 최신 브라우저가 모두 지원하는 구문을 말한다. 아래의 기능은 구글에서 말하는 10년 동안 가장 널리 사용된 자바스크립트의 기능이다.

  • Classes (ES2015)

  • Arrow functions (ES2015)

  • Generators (ES2015)

  • Block scoping (ES2015)

  • Destructuring (ES2015)

  • Rest and spread parameters (ES2015)

  • Object shorthand (ES2015)

  • Async/await (ES2017)

최신 버전의 언어 사양 기능은 최신 브라우저에서 일관되지 않는 지원을 제공한다(ES2020, ES2021 등). 따라서 이러한 기능에 직접 의존하는 것은 안전하지 않다. 즉 모던 자바스크립트란 계속 변하는 개념이지만, 현재 시점(2021년 5월)에선 ES2017이 일반적으로 사용되는 최신 구문 기능을 대부분 포함하면서도 광범위한 브라우저 호환성을 제공한다. 다시말해 ES2017이 오늘날 모던 자바스크립트에 가장 가깝다고 할 수 있다.

Legacy JavaScript

레거시 자바스크립트란, 위의 모든 언어 기능을 사용하지 않는 코드를 말한다. 이런 레거시 자바스크립트가 "왜 나왔을까? 언제 쓰일까?"라고 생각해 본다면 떠오르는게 있는가?

대부분의 개발자들이 위의 기능들을 사용하며 소스 코드를 작성한다. 하지만, 자세히 보면 브라우저 지원 향상을 위해 모든 것을 레거시 구문으로 컴파일 한다. 물론 결과는 맞긴하다. 레거시 구문으로 컴파일 하면 브라우저 지원이 증가하지만, 다시 생각해 본다면 효과는 생각보다 작다. 브라우저 지원이 약 95%에서 98%로 증가하지만, 상당한 비용이 발생한다.

  • 레거시 자바스크립트는 일반적으로 동등한 모던 자바스크립 코드보다 약 20% 더 크고 느리다.

  • 설치된 라이브러리는 일반적인 프로덕션 자바스크립트 코드의 90%를 차지한다. 라이브러리 코드는 모던 자바스크립트 코드를 통해서 피할 수 있었던 폴리필(polyfill) 및 helper 중복으로 인해 훨씬 더 높은 레거시 자바스크립트 오버헤드를 발생시킨다.

레거시를 위한 fallback 지원

패키지를 publish 할때 exports 필드와 main을 같이 써주자. 그럼 레거시 브라우저를 위한 ES5+ CommonJS fallback또한 포함된다.

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs"
}

결론

ES2017이 모던 자바스크립에 가깝고, ES5 구문으로 작성된 애플리케이션 또한 종속성 업데이트로 인해 브라우저 지원이 중단될 수도 있다. npm, babel, webpack, rollup 과 같은 도구를 통해 빌드 시스템을 구성하고 ES2017 구문을 사용해서 패키지를 작성하자.

출처 및 도구 설정 방법

https://web.dev/publish-modern-javascript/

Previous왜 babel을 사용해야 될까?Next자바스크립트 평가 전략

Last updated