SvelteKit + Vite

Svelte Bundler의 역사

Svelte는 Svelte Framework의 공식 번들툴을 Rollup을 사용하였는데 이는 Svelte를 개발한 리치 해리스가 만든 번든툴이 바로 Rollup이었기 때문입니다.

 

당시 Rollup에서는 HMR을 지원하지 못했는데 이는 매우 강력한 기능이기에 Svelte에도 이러한 HMR이 되기를 바랬고 Svelte는 Rollup을 버리고 Snowpack을 공식 번들툴로 변경하려고 하는 작업을 하게 됩니다. 그렇게 해서 Svelte의 공식 번들툴이 Snowpack으로 변경이 되면서 Svelte도 esbuild의 빠른 속도와 강력한 HMR기능을 손에 얻게 됩니다. 그러나 snowpack은 안정적이지 못했습니다. 웹팩과 연동해서 사용하는 과정에서 다소 버그들이 있었도 webpack의 loader들과 잘 호환이 되지 않던 문제들도 더러 있었습니다. 어쨌든 그렇게 esbuild + 브라우저 표준 모듈로 개발하고 실전은 기존 번들 툴로 하면서 HMR제공, 개발서버 제공 등 각종 개발 편의들을 제공할 수 있는 컨셉이 세상에 나오게 되었습니다.

 

Snowpack의 컨셉은 아주 좋았지만 안정화과 되는데에는 시간이 좀 필요했습니다. 그리고 기존의 좋은 컨셉을 본인화 하여 더 간결하고 낫게 만들어내는 특기를 가진 에반유가 이러한 빌드 툴을 만들기 시작했습니다. 그리고 Vite가 탄생하였습니다. Vite는 esbuild와 브라우저 모듈을 이용한 개발모드, 개발서버, 프록시 서버, 번든 툴, 코드 스프리팅, HMR 등 지금까지 나왔던 snowpack의 컨셉과 다른 번들도구들에서 제공하는 기능을 한데 모은 프론트엔드 번들 도구를 만들게 됩니다.

그리고 이렇게 만들어진 Vite는 기존의 나왔던 번들러들의 컨셉을 모두 흡수하면서도 간결한 사용방식과 더불어 안정성, 그리고 훌륜한 문서를 제공함으로써 2021년 가장 만족도가 높은 번들 툴이 됩니다.

 

완전한 동반자 관계 Svelte ❤️ Vite

불과 몇 달 전까지도 아직까지 공식 홈페이지에서는 rollup을 기반으로 했으나 지금은 완전히 vite를 통해서 프로젝트를 구성하도록 가이드를 하고 있습니다. 덕분에 Svelte는 Dev server + HMR + typescript + dev proxy를 지원할 수 있게 됩니다!

 

Vite의 특징

Vue.js를 개발한 에반 유는 앞서 언급했던 Snowpack의 단점을 보완한 vite를 제작합니다. 처음에는 Vue를 위해 만들어졌으나 지금은 React등 다른 프레임워크와 라이브러리에도 지원 가능합니다. esbuild와 다른 번들 도구에서 제공하는 기능들 (ex. 코드 스플리팅, 개발서버)을 하나로 모은 프론트엔드 번들 도구라고 생각하면 될 것 같습니다.

• Dependencies와 SourceCode를 분리하여 빌드합니다.
  
  정리하면, esbuild로 미리 트랜스파일링 해놓은 뒤, 로컬에서 개발 서버를 띄우면 소스 코드를 불러오면서 의존성이 있는 패키지만 가져옵니다. 한 번 빌드한 결과는 캐싱을 해두어 다음 개발 빌드 때 바로 뜨게 됩니다.
  
  
• 그러나 sourceCode는 우리가 작성 중이 코드로써 변화가 잦습니다 . 하지만 모든 코드가 동시에 로드될 필요는 없는데요. Vite는 브라우저의 요청에 따라 필요한 소스 코드를 변환해서 제공하면 됩니다. (브라우저가 번들러 작업의 일부를 인계 받는다고 생각하시면 됩니다. )
  
  
• dependencies는 대부분 개발하는 동안 변화가 거의 없는 의존성 모듈들 입니다. vite는 COMMONJS 모듈들을 ESM으로 변환하고 번들링을 진행하는데요, 사전 번들링 작업은 esbuild를 통해 이루어 집니다.
  
  
• ESM을 사용하여 매우 빠릅니다.
  Vite는 ESM을 사용하여 매우 빠른데요. vite는 Native ESM을 이용해 소스 코드를 제공하도록 하고 있습니다. 즉, 브라우저가 곧 번들러라는 입니다. vite는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스코드를 요청하면 이를 전달할 뿐입니다.
  
  
• 기본 ES 모듈보다 매우 빠른 Hot Module Replacement 제공합니다.
  번들러가 아닌 ESM을 이용해서 제공하기 때문에 , 어떤 모듈이 수정되면 vite는 그저 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달 할 뿐입니다. 이 과정에서 ESM을 이용하기 때문에 앱 사이즈가 커져도 HMR을 포함한 갱신 시간에는 영향을 끼치지 않습니다.
  
  
• Vite는 TypeScript , CSS로더 , HMR을 제공하면서도 복잡한 설정이 필요 없습니다.

 

장점

• ESM을 이용하여 소스 코드를 제공합니다.
  모듈 수정 시 모듈과 관련된 부분만 교체 가능합니다.
• 번들링 속도에서 큰 메리트가 있습니다.

단점

• 배포를 위해서는 기존 번들 과정이 필요합니다. 아직 ESM을 프로덕션에 배포하는 것은 비효율적인 부분이 있기 때문입니다. 또한 트리쉐이킹이나 코드 스플리팅과 같은 최적화 기능을 제공하지 않아요. 따라서 기존의 번들링 기법을 최대한 활용하게 되고 내부적으로는 Rollup을 사용하고 있습니다.
• 아직까지는 SSR 지원 폭이 좁고 안정성이 떨어집니다.

 

 

 

참고)

https://velog.io/@teo/vite

Vite 이야기 (feat. Svelte)

https://velog.io/@wynter_j/Bundler-JavaScript-%EB%B2%88%EB%93%A4%EB%9F%AC-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Webpack-Parcel-Rollup-Vite...-2

[Bundler] JavaScript 번들러 그리고 Webpack , Parcel , Rollup , Vite... (2)