[vite] esm, rollup.. 알고 쓰자

     

목차

1. vite란?
2. esm이란?
3. 그렇다면 vite는 배포과정에서 번들링을 하지 않는 것인가?
4. 번들링이란?
5. rollup이란?

 

 

 

나는 vite를 사용하면서 정작 vite의 사용이유를 모호하게 알고 있는 것 같아 정리하고자 한다.

 

vite란?

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구로 

개발 시에는 esm을 통한 최적의 환경을 제공하고 번들링 시에는 rollup기반의 다양한 빌드 커맨드를 통한

최적화된 정적 리소스들을 배포할 수 있게끔 한다.

 

 

esm이란?

• ES6에 도입된 모듈 시스템
• import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있다.

 

그래서 이게 vite에서 왜 특별한거지

 

문제 상황

애플리케이션이 발달함에 따라 js 모듈의 개수가 증가하게 되었는데 이에 개발 서버를 가동하는데

오랜 시간을 기다려야 했다. 또한 HMR(Hot Module Replacement 모든 종류의 모듈을 새로고침 하지 않고 수정된 파일만 교체하는 것)을 사용하더라도 변경된 파일이 적용될 때까지 수 초 이상 소요되었다.

 

 

Native ESM을 이용하면 컴파일링이 필요하고 수정이 매우 잦은 TS, JSX 등의 NON-Plain JS등에 대해

import문을 해석하고 요청하는 모듈에 대해서만 소스 코드를 제공한다. 이는 전체 애플리케이션을 미리

번들링하는 것보다 빠른 방식으로 이러한 접근 방식을 No-Bundle, Unbundled 라고 불린다.

 

기존 방식

 

ESM을 이용한 방식

 

그렇다면 vite는 배포과정에서 번들링을 하지 않는 것인가?

그렇지 않다.

프로덕션에서 번들되지 않은 ESM을 가져오는 것은 중첩 import 문제가 발생하게 되는데, import는 새로운

네트워크 요청을 발생시킨다. 그런데 impport 체인이 깊이 중첩돼 있다면, 여러 번의 순차적인 네트워크 요청을 발생시킨다. 따라서 프로덕션 환경에서도 최적의 로딩 성능을 얻으려면 코드 스플리팅, 지연 로딩 및 트리 쉐이키 등을 통해

번들링 하는 것이 좋다. 이때 vite에서는 번들링 도구로 RollUp을 이용한다.

 

 

++참고

번들링 vs 빌드
번들링은 빌드의 한 부분이다.
번들링, 압축, 난독화, 트랜스파일링 등의 과정을 빌드라고 한다.
현대의 번들링 도구들은 빌드 과정까지 함께 지원하기 때문에 헷갈릴 수 있다.

 

 

번들링이란?

우리가 의존하고 있는 라이브러리 파일, 즉 JS 파일을 하나로 합쳐주는 과정을 번들링이라고 한다.

 

 

번들링의 장점

• 꼭 필요한 코드만 찝어서 합쳐준다. => 용량 절약
• 파일 하나로 합쳐주기 때문에 import/require이 필요없다. => 결과물은 JS 파일 하나임
• 모듈화된 코드를 브라우저에서 실행할 수 있도록 Bundle을 생성해준다.
• HTTP 요청 수를 줄여서 웹 로딩 속도를 개선할 수 있다.
  • 리소스가 많아지면 로딩 속도가 저하되는데, 번들러를 사용하면 이러한 이슈를 해결할 수 있다.
• 코드 축소, Hot Reloading, 코드 분할 등 여러 기능을 제공한다.

 

rollup이란?

webpack은 내부적으로 Commonjs를 사용하고 rollup은 typescript(ES6)를 사용한다.

이로 인해서 아래 특성들이 있다고 볼 수 있다.

 

1. rollup은 ES6 모듈 형태로 빌드할 수 있다.

webpack은 CommonJS 형태로만 번들링이 가능했습니다. 물론 webpack v5부턴 ES6로 번들할 수 있다.

라이브러리는 ES6 번들에 생성에 대한 수요가 강하다.

ES6 환경에서는 ES6 번들이 사용되고 CommonJS 환경에서는 CommonJS 번들이 사용되도록 해줘야 라이브러리 사용자는 더욱 최적화된 애플리케이션을 빌드해줄 수 있다.

 

2. rollup은 좀 더 빠르다.

webpack은 모듈들을 함수로 감싸서 평가하는 방식을 사용하지만 rollup은 모듈들을 호이스팅하여 한번에 평가하기에 성능상 이점이 있다.

 

3. rollup은 더 가벼운 번들을 생성한다

tree shaking은 기본적으로 ES6 코드에서 제대로 동작한다.

단순히 레퍼런스되지 않는 코드를 제거하는 것이 아닌 사용되는 모듈만 AST 트리에 포함시키는 방식으로 불필요한 코드를 제거하기 때문이다.

rollup은 공식 플로그인을 통해서 CommonJS 코드를 ES6 코드로 변환할 수도 있다.

 

4. rollup은 CommonJS 코드를 ES6코드에서 사용할 수 있다.

기본적으로 ES6에서는 CommonJS식의 require를 지원하지 않는다.

webpack에서도 공식적으론 ES6 혹은 CommonJS 한 형태의 코드 베이스를 사용하기를 권장한다.