Vite가 Vue CLI를 쓸모 없게 만들었습니까?

Vue 생태계에는 Vite라는 새로운 빌드 도구가 있습니다. 개발 서버는 Vue CLI보다 10 ~ 100 배 빠릅니다.

이것은 Vue CLI가 더 이상 사용되지 않음을 의미합니까? 이 기사에서는 두 빌드 도구를 비교하고 장단점을 해결하여 다음 프로젝트에 적합한 도구를 결정할 수 있습니다.

참고 :이 기사는 원래 2020/12/07에 Vue.js 개발자 블로그게시 되었습니다.

Vue CLI 개요

대부분의 Vue 개발자가 알다시피 Vue CLI는 표준 빌드 도구 및 모범 사례 구성으로 Vue 기반 프로젝트를 빠르게 설정하는 데 없어서는 안될 도구입니다.

주요 기능은 다음과 같습니다.

  • 프로젝트 비계
  • 핫 모듈 재 로딩 기능이있는 개발 서버
  • 플러그인 시스템
  • 사용자 인터페이스

Vite 개요

Vue CLI와 마찬가지로 Vite는 기본 프로젝트 스캐 폴딩 및 개발 서버를 제공하는 빌드 도구이기도합니다.

그러나 Vite는 Webpack을 기반으로하지 않으며 브라우저에서 네이티브 ES 모듈을 활용하는 자체 개발 서버를 가지고 있습니다. 이 아키텍처는 Webpack의 개발 서버보다 훨씬 더 빠른 속도를 허용합니다. Vite는 빌드를 위해 Rollup을 사용하는데,이 역시 더 빠릅니다.

Vite는 현재 베타 버전이며 Vite 프로젝트의 목표는 Vue CLI와 같은 올인원 도구가 아니라 빠른 개발 서버와 기본 빌드 도구를 제공하는 데 초점을 맞추는 것 같습니다.

Vite는 어떻게 그렇게 빠릅니까?

Vite 개발 서버는 최소한 Webpack보다 약 10 배 더 빠릅니다. 기본 프로젝트의 경우 이것은 2.5 초 ( 소스 ) 와 비교하여 개발 빌드 / 재 빌드의 경우 250ms의 차이입니다 .

더 큰 프로젝트에서는 그 차이가 훨씬 더 인상적입니다. Webpack 개발 서버는 빌드 / 재 구축을 위해 25-30 초로 느려지거나 때로는 그 이상으로 느려질 수 있습니다. 한편 Vite 개발 서버는 일정한 250ms 속도로 동일한 프로젝트를 제공 할 수 있습니다.

이것은 분명히 개발 경험의 판도를 바꾸는 차이입니다. Vite는 어떻게 이것을 할 수 있습니까?

Webpack 개발 서버 아키텍처

웹팩가 작동하는 방법은 모든 해결하여 자바 스크립트 기반의 번들로 전체 응용 프로그램을 구축한다는 것입니다 importrequire응용 프로그램과 잘 지내 변환 파일 (예를 들어, 말대꾸, 타이프 라이터, SFC).

이것은 모두 서버 측에서 수행되며 종속성 수와 변경 후 빌드 / 다시 빌드하는 데 걸리는 시간 사이에는 대략 선형 관계가 있습니다.

Vite 개발 서버 아키텍처

Vite는 앱 서버 측을 번들로 제공하지 않습니다. 대신, JavaScript 모듈 (일명 ES 모듈이며 비교적 새로운 기능 임) 에 대한 브라우저의 기본 지원에 의존합니다 .

브라우저는 HTTP를 통해 필요에 따라 JS 모듈을 요청하고 런타임 중에 처리합니다. Vite 개발 서버는 필요에 따라 모든 파일 (예 : Sass, TypeScript, SFC)을 변환합니다.

이 아키텍처는 전체 앱의 서버 측 번들링을 피하고 브라우저의 효율적인 모듈 처리를 활용하여 훨씬 더 빠른 개발 서버를 제공합니다.

팁 : Vite는 개발 중에도 필요한 모듈 만로드하기 때문에 애플리케이션을 코드 분할하고 트리 셰이크 할 때 훨씬 더 빠릅니다. 이것은 코드 분할이 프로덕션 번들에만 도움이되는 Webpack과 다릅니다.

이 설명을 지나치게 단순화했습니다. Vite의 아키텍처와 더 많은 벤치 마크에 대해 자세히 알아 보려면 저자 Evan You의 토크 Vite 및 VitePress, VueConf Toronto 2020을 참조하십시오 .

Vite 단점

Vite의 핵심 기능은 엄청나게 빠른 개발 서버라는 사실을 알고 계실 것입니다.

이 기능이 없으면 Vue CLI와 비교할 때 실제로 다른 것을 제공하지 않으며 실제로 몇 가지 단점이 있기 때문에 더 이상 논의가 없을 것입니다.

Vite는 JavaScript 모듈을 사용하므로 종속성도 JavaScript 모듈을 사용하는 것이 좋습니다. 대부분의 최신 JS 패키지가이를 제공하지만 일부 오래된 패키지는 CommonJS 모듈 만 제공 할 수 있습니다.

Vite는 CommonJS를 JavaSript 모듈로 변환 할 수 있지만 불가능한 경우가 있습니다. 물론 JavaScript 모듈을 지원하는 브라우저가 필요합니다.

Webpack / Vue CLI와 달리 Vite는 이전 브라우저, 웹 구성 요소 등을 대상으로하는 번들을 만들 수 없습니다.

그리고 Vue CLI와 달리 개발 서버와 빌드 도구는 서로 다른 시스템이므로 프로덕션과 개발에서 일관성없는 동작이 발생할 가능성이 있습니다.

Vue CLI와 Vite 요약

그래서 평결은 무엇입니까?

숙련 된 Vue 개발자에게 Vite는 엄청나게 빠른 개발 서버로 인해 Webpack이 선사 시대처럼 보이기 때문에 훌륭한 옵션입니다.

그러나 손을 잡는 것을 선호하는 새로운 Vue 개발자 또는 레거시 모듈을 사용하고 복잡한 빌드가 필요한 대규모 프로젝트의 경우 Vue CLI가 당분간 필수적으로 유지 될 가능성이 높습니다.

Vite의 미래

위의 비교 는 현재 Vite 및 Vue CLI에 주로 초점을 맞추었지만 앞으로 나아가 야 할 몇 가지 사항이 있습니다.

  • Vite는 브라우저에서 JavaScript 모듈 지원이 향상 될 때만 향상됩니다.
  • JS 생태계가 따라 잡으면 더 많은 패키지가 JavaScript 모듈을 지원하여 Vite가 처리 할 수없는 엣지 케이스를 줄입니다.
  • Vite는 아직 베타 버전이며 기능이 변경 될 수 있습니다.
  • Vue CLI는 결국 Vite를 통합하므로 둘 중 하나를 사용할 필요가 없습니다.

참고 문헌

Suggested posts

닷지 종속성이있는 React 앱 인수

닷지 종속성이있는 React 앱 인수

나는 당신이 선택한 React 코드베이스에서 두 가지 일을 할 것을 감히한다. 나는 게임 데이를 위해이 기초적인 악성 코드를 만들었다. 매월 Okra Solar의 개발 팀원 중 한 명이 문제가 발생할 경우 발생하는 상황에 대비하여 나머지 팀원이 준비 할 수 있도록 연습을 진행합니다.

프런트 엔드 개발자가 성능에 관심을 갖는 이유

프런트 엔드 개발자가 성능에 관심을 갖는 이유

프런트 엔드 개발자는 조기 최적화 함정에 쉽게 빠지게됩니다.하지만 왜… 그리고 그래야합니까? 끊임없이 변화하는 환경, 즉 노드 모듈 내에서 수천 개의 JavaScript 파일이 가려지는 의존성 체인을 지속적으로 롤링하는 진화하는 트렌드의 생태계로 가득 찬 세계입니다. 고려해야 할 사항이 많이 있습니다. DOM의 HTML 리플 로우, 다시 그리기, 캔버스 및 WebGL 변형의 컨텍스트 렌더링 또는 SVG의 벡터 그래픽입니다.