Vite로 초고속 프런트엔드 개발 환경 설정

귀하의 프로덕션 앱은 거대합니다.
npm run dev를 눌러 개발 서버를 시작합니다.

1분 후, 거기에 있습니다! 개발 여정을 시작할 수 있습니다.

1분이 긴 시간처럼 느껴지지 않지만 — 저희 개발자에게는 긴 시간입니다. 우리는 까다롭고 모든 것을 즉시 원합니다.

운 좋게도 이를 가능하게 하는 새로운 도구가 있습니다.

I present you — Vite .

Vite는 무엇입니까?

Vite는 놀랍도록 빠른 개발 경험을 제공하는 빌드 도구입니다.

Vite는 "빠른"을 뜻하는 프랑스어이며 /vit/로 발음됩니다(흰색이 아님!).

Vue.js를 만든 Evan You가 만들었습니다.

Vite가 Vue.js 전용이라는 의미는 아닙니다. — 프레임워크에 구애받지 않습니다!

왜 그렇게 빠릅니까?

이것에 대해 신경 쓰지 않고 Vite를 설정하려는 경우 이 섹션을 건너뛰십시오.


당신이 여전히 나와 함께 있다면 놀랍습니다! 몇 가지 역사 수업이 있습니다.

오늘날 가장 인기 있는 빌드 도구인 Webpack은 2014년에 출시되었습니다.

그 당시에는 브라우저가 기본 모듈 가져오기를 지원하지 않았으므로 파일을 번들로 묶는 것이 합리적이었습니다.

2021년에는 더 이상 없습니다.

비용이 많이 드는 프로세스입니다.

또한 단일 파일을 업데이트할 때마다 화면에서 변경 사항을 보려면 전체 번들을 업데이트해야 합니다.

그렇기 때문에 Hot Module Reload는 때때로 몇 초가 걸릴 수 있습니다!

Vite는 기본 모듈 가져오기 기능을 사용하여 Hot Module Reload를 즉시 만듭니다.

왜 그렇게 빠른지에 대한 몇 가지 더 깊은 이유가 여전히 있으므로 관심이 있는 경우 해당 웹 사이트를 확인하십시오. 하지만 이제 앱을 설정해 봅시다!

Vite 설정… 소리처럼 간단하고 빠릅니다.

단 하나의 전제 조건이 있습니다: Node version >=12.0.0 .

그 후, 당신은 모두 좋습니다!

터미널을 열고 다음을 입력하십시오.

npm init vite@latest

그런 다음 단계가 있습니다.

프로젝트 이름

프레임워크(Vanilla JS, Vue, React, Preact, Lit, Svelte)

Typescript 또는 순수 JS

그리고 그게 다야!

이제 프로젝트 폴더로 이동해야 합니다.

cd <YOUR_PROJECT_NAME>

종속성을 설치합니다.

npm install

그리고 개발 서버를 시작합니다.

npm run dev

다음은 다음과 같습니다.



0.3초 이내에 준비됩니다. 그건 미쳤어!

비교를 위해 VueCLI + Webpack으로 만든 동일한 앱은 처음에 10초가 걸립니다. 이것은 Vite를 39배 더 빠르게 만듭니다!

앱이 커지면 속도 얘기도 하지 않겠습니다.


그리고 Hot Module Reload는 즉각적입니다.

Webpack은 초기에 약 2~3초가 걸리고 대용량 앱의 경우 최대 5초가 걸립니다.

결론

Vite에 대해 어떻게 생각하세요?

새로운 프런트엔드 도구가 매일 나오는데 이렇게 흥분했던 게 언제였는지 기억이 나지 않습니다. 나는 이것이 우리의 이미 훌륭한 프론트엔드 개발 경험을 근본적으로 향상시킬 수 있다고 믿습니다.

아직 사용해 보셨나요?


This post was originally published on Dom's personal blog. Check out dat new amazing blog design there ✨