프런트 엔드 빌드 도구 Vite

VITE를 선택하는 이유

점점 더 큰 애플리케이션을 구축하기 시작하면서 처리할 JavaScript 코드의 양이 기하급수적으로 증가했습니다. 수천 개의 모듈이 있는 대규모 프로젝트는 상당히 일반적입니다. JavaScript를 기반으로 개발된 도구는 성능 병목 현상을 일으키기 시작합니다: 일반적으로 개발 서버를 시작하는 데 오랜 시간(심지어 몇 분!)이 걸리며 HMR(핫 모듈 교체)을 사용하더라도 파일 수정 효과가 나타나는 데 몇 초가 걸립니다. 브라우저. 이러한 주기는 계속되고 느린 피드백은 개발자의 개발 효율성과 행복에 큰 영향을 미칩니다.

Vite는 생태계의 새로운 개발을 활용하여 위의 문제를 해결하는 것을 목표로 합니다. 브라우저는 기본적으로 ES 모듈을 지원하기 시작하고 점점 더 많은 JavaScript 도구가 컴파일된 언어로 작성됩니다.

VITE의 장점

개발 환경에서는 패키징 작업이 필요하지 않으며 신속하게 콜드 스타트할 수 있습니다.
가볍고 빠른 핫 리로드(HMR).
더 이상 전체 애플리케이션이 컴파일될 때까지 기다리지 않는 진정한 온디맨드 컴파일입니다. 기존 웹팩 컴파일: 컴파일이 실행될 때마다 항목 항목을 통해 각 경로를 찾은 다음 각 경로의 해당 모듈을 로드한 다음 bundle.js 파일로 패키징하고 최종적으로 서버에 알립니다. 핫 업데이트. 즉, 업데이트된 페이지를 렌더링하기 전에 모든 파일이 로드될 때까지 기다리십시오 == "느리게"
Vite 컴파일: 기존 구성과 달리 vite는 먼저 서버 업데이트를 준비한 다음 항목 파일을 찾은 다음 해당 경로에서 모듈을 컴파일하기 위해 로드할 경로를 동적으로 찾아 온디맨드 로딩과 유사하게 더 작은 전체 크기 그리고 더 빠르게 업데이트합니다.

Vite-Cli 빠른 빌드 프로젝트

1. 관련 준비물

Vite에는 Node.js 버전 >=12.2.0이 필요합니다. 그러나 일부 템플릿은 작동하려면 더 높은 Node.js 버전이 필요합니다. 패키지 관리자가 경고하는 경우 업그레이드하십시오. n, nvm 또는 nvm-windows를 사용하여 동일한 시스템에서 여러 버전의 Node를 관리할 수 있습니다. Node.js 설치 방법을 알아보려면 nodejs.org를 참조하세요. 시스템에서 실행 중인 Node.js 버전이 확실하지 않은 경우 터미널 창에서 node -v를 실행합니다.
npm 패키지 관리자 우리는 일반적으로 Vite에서 제공하는 스캐폴딩을 사용하여 프로젝트 구조를 빌드하기 때문에 npm 패키지와 npm >= 6을 다운로드하여 설치해야 합니다. , npm 패키지 관리자가 필요합니다. 이 가이드는 Node.js에 기본적으로 설치되는 npm 클라이언트 명령줄 인터페이스를 사용합니다. npm 클라이언트가 설치되어 있는지 확인하려면 터미널 창에서 npm -v를 실행합니다.

2. 프로젝트 생성

1. 기본 생성:
npm 사용:

npm create vite@latest

실 사용:

yarn create vite  //yarn

사용 pnpm :

pnpm create vite

2. 예를 들어 Vite + Vue 프로젝트를 빌드하는 데 사용할 프로젝트 이름과 템플릿을 지정하고 다음을 실행합니다.

//项目名：my-vue-app；  模板：vue

npm create vite@latest my - vue - app – 템플릿 vue // npm 6.x

npm create vite@latest my - vue - app – – 템플릿 vue //npm 7+

원사 생성 vite my - vue - app – 템플릿 vue //yarn

pnpm create vite my - vue - app – – 템플릿 vue //pnpm

3. 프로젝트 시작

먼저 자신의 프로젝트로 이동합니다: cd my-project, 그런 다음:

npm install
npm run dev