개발후라이
개발후라이
개발후라이
  • 분류 전체보기 (287)
    • Web Front End (76)
      • Javascript & Typescript (26)
      • React (12)
      • Vue (4)
      • Nodejs (1)
      • HTML (6)
      • CSS (8)
      • HTTP (6)
      • 책 - Review (8)
    • TIL (0)
    • Problem Solved (135)
      • 알고리즘 (4)
      • BOJ (67)
      • Programmers (8)
      • HackerRank (33)
      • LeetCode (23)
    • 회고 (4)
      • 오늘의 회고 (16)
      • 주간 회고 (15)
      • 월간 회고 (7)
      • WakaTime (9)
    • Git (3)
    • 기타 (15)
      • 취업 (5)
      • 자격증 (1)

블로그 메뉴

  • GitHub
  • LinkedIn
  • 홈

인기 글

태그

  • 프론트엔드
  • 자바스크립트
  • 개발자
  • 노개북
  • 오늘의회고
  • 회고
  • TypeScript
  • JavaScript
  • 릿코드
  • 노마드북클럽

최근 댓글

최근 글

전체 방문자
오늘
어제

티스토리

hELLO · Designed By 정상우.
개발후라이

개발후라이

Web Front End/Javascript & Typescript

SvelteKit에는 왜 Vite가 선택되었을까? "Vite VS Snowpack"

2022. 9. 1. 22:42
반응형

SvelteKit에는 왜 Vite가 선택되었을까? Vite VS Snowpack

  • svelte 인프런 강의를 보다가 snowpack으로 되어 있길래 강사님에게 빌드툴 선택에 대한 질문을 올렸더니 아래 유투브를 공유해 주셨다.
  • 유투브 링크
  • 내가 이해한 내용으로 SvelteKit에서 Vite를 선택한 이유를 간단히 정리해 보려고 한다. (유투브가 21년도 3월 영상이라 현재와 다를 수 있다.)
  1. Vite가 버전이 1에서 2로 올라가면서 지원하는 기능들이 좋아졌다.
  2. Vite 사용 시 작성하는 코드가 적어졌다.
    • snowpack을 사용할 경우에는 css 코드 스플리팅과 소스맵으로 스택 추적하는 기능에 대한 코드를 많이 써야 했다.
// svelte.config.js
// 기본 코드가 매우 적다. CRA나 Vue-cli에서 숨어 있는 webpack 코드를 생각하면 정말 적다.. 
const config = {
  kit: {
    adapter: adapter(),

    // Override http methods in the Todo forms
    methodOverride: {
      allowed: ['PATCH', 'DELETE']
    }
  }
};
  1. Vite는 rollup을 베이스로 두고 있어 rollup plugin을 자유롭게 사용할 수 있다.
  2. SvelteKit maintainer가 프로젝트에서 종속성을 제거할 수 있었다.
    • 9개로 존재하던 종속성을 3개로 줄일 수 있었다.
// svelte kit 기본 모드로 생성할 경우 dependencies
"dependencies": {
  "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
      "cookie": "^0.4.1"
}

결론

  • vite나 snowpack 모두 빠르고 작게 가져가고자 하는 방향성은 일치하는 것 같다. 하지만 지원하는 유연성과 퀄리티가 Vite가 더 좋다고 생각된다. Vite가 rollup based로 했던 게 탁월한 선택인 것 같다.
  • 하지만 레거시 프로젝트에서 vite로 바꾸는 것에 대해서는 더 많은 고민이 필요하다. 공식적으로 지원되는 모던한 버전의 디펜던시를 가지고 있는 프로젝트라면 vite로 변경할 것 같다. 참고
반응형
저작자표시 (새창열림)
    'Web Front End/Javascript & Typescript' 카테고리의 다른 글
    • npm에 라이브러리 릴리즈하고 운영하기
    • React Query 살펴보기
    • [Typescript Challenges] Awaited, If, Concat
    • [Typescript Challenges] First of Array, Length of Tuple, Exclude
    개발후라이
    개발후라이
    어제보다 오늘 발전하기 위한 공간 https://github.com/choisohyun

    티스토리툴바