Vue vite란

vite(비트)란?

비트는 자바스크립트 네이티브 모듈 (opens new window)을 기반으로 한 데브 서버이다, 이미 현대 프런트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있다 그런데 왜 비트와 같은 도구들이 나왔을까? 그 이유는 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문이다 왜 빠른지 이해하기 위해서는 먼저 번들링과 자바스크립트 네이티브 모듈을 이해해야 한다

번들링이란?

브라우저에서 ESM(ES Modules)을 지원하기 전까지는 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었다. 따라서 개발자들은 웹팩, Rollup, Parcel과 같은 도구를 이용하여 번들링(Bundling)이라는 우회적인 방법을 사용해야 했다

[ESM이란]

• ESM : 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미한다 만약 아래와 같은 코드를 웹팩과 같은 번들러 없이 브라우저에서 실행하면 에러가 발생한다

  // app.js
  import { sum } from './math.js';
  console.log(sum(10, 20));
  <script src="./app.js"></script>
  

  하지만, 이제는 script 태그에 아래와 같이 type=”module” 속성을 추가하면 정상 동작하는 것을 볼 수 있다

  <script type="module" src="./app.js"></script>
  

  이렇게 브라우저에서 import와 export를 소화할 수 있는 능력이 바로 ESM이다

Vite의 특징

비트는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠르다 500개 정도 되는 모듈을 갖고 있는 웹 서비스를 웹팩 데브 서버 (opens new window)와 비트로 비교해 본다면 실행 시간이 20 ~ 30배 이상 차이가 난다. 웹팩 데브 서버는 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하기 때문에 당연히 어느 정도의 시간이 필요하지만 비트는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 바로 구동된다