Vite쓰면 리액트 10배 빨라짐

npm 은 JS 라이브러리 모아놓은 플랫폼

NPM (node package manager) 명령어는 자바스크립트 라이브러리를 설치하고 관리하는 패키지 매니저이다.

개발자는 단 몇줄의 명령어로 기존의 공개된 모듈들을 설치하고 활용할 수 있다. Java랑 비교하자면 메이븐과 비슷하다.

 

그런데, npm 을 사용하여 프로젝트를 만들때 node_modules 폴더 용량이 크고, import/require문법은 브라우저친화적이지 않습니다.

 

[해결책]

Bundling : 모든 js 파일을 하나로 합쳐 사용하는걸 번들링이라 함 

- 실제 필요한 코드만 합쳐줌(용량절약)

- 결과물은 js 파일 하나임(import/require 필요 없어짐)

 

그래서 npm을 이용하려면 bundle tools도 같이 사용해야 됩니다.  bundle tools로 가장 유명한 것이 webpack 입니다.  

webpack의 문제점은 npm 라이브러리 많아지면 Webpack bundling 오래 걸립니다. 

 

그래서 나온 bundle 2세대 툴은 vite, snowpack 이 있습니다. 프로젝트가 커져도 아주 빠릅니다. 

 

Vite에 왜 빠른지에 대해서 알아 보겠습니다.  

Go로 만든 bundler 라이브러리 esbuild를 사용합니다.  라이브러리 설치하자마자 미리 bundle 만듭니다. 그리고 소스코드는 필요한것만 사용합니다.  수정사항이 발생시에도 수정된 부분만 변경사항에 반영하여 빠르게 실행시켜 줍니다. 

 

Vite 개발환경 설정

npm create vite@latest

 

Reference 

https://www.youtube.com/watch?v=iX3Nu1FcZKA