React + Typescript 초기 세팅을 하며, vite를 알게 되었다. 기존에 사용하던 CRA와 무엇이 다른지 정리해보고자 한다.
CRA
우선, CRA는 공식 리액트 보일러 플레이트이다.
webpack과 babel을 이용하여 파일로더, 빌드툴, es6문법 지원, eslint 등 기본적인 React를 이용한 프론트엔드 개발을 가능하게 해준다.
🤷🏻♀️webpack이란?
-> javascript로 구성된 툴이다. 자바스크립트 모듈 번들러의 한 종류이며 라이브러리 형태이다.
여기서 자바스크립트는 실행 즉시 인터프리터를 거쳐서 실행되는 언어로 컴파일 언어보다 실행속도가 느리다.
(컴파일 언어는 소스코드 전체를 컴파일,기계어로 번역 한 후 기계어를 CPU/메모리를 통해 실행하는 언어이며, interpreter 언어는 인터프리터로 소스코드를 한줄씩 번역하며 동작하는 언어를 말한다. )
애플리케이션의 크기가 커지면, 유지보수나 관리의 이유로 코드를 분할하여 관리하게 된다. 이렇게 되면 애플리케이션 내에서 수 많은 자바스크립트 파일을 로딩해야하며 이에 따른 네트워크 비용은 증가할 수 밖에 없다. 따라서 웹팩은 자바스크립트 파일을 모듈화 시켜 관리 해 주는 라이브러리라고 정리할 수 있다.
Vite
기존 vue 전용 빌드 툴이다. dev실행, 프로덕션용 빌드에 초점을 맞췄다.
vite는 CRA와 다르게 webpack을 사용하지 않으며 이 부분에서 속도면의 장점을 크게 가져다 준다.
webpack을 사용하는 CRA의 경우 인터프리터 언어인 자바스크립트로 작성되어 실행속도가 느리다.
하지만 vite는 webpack을 대신하여 컴퓨터가 이해하기 쉬운 저급언어(Go)로 작성된 Esbuild를 기반으로 만들어진 프론트엔드 빌드 툴이다.
vite는 브라우저에서 네이티브 ES 모듈 활용과 complie-to-native 언어로 작성되었다. ES 모듈을 활용했기 때문에 자바스크립트 코드를 번들 할 필요 없이 브라우저에서 바로 자바스크립트 애플리케이션이 작동 가능하다.
여기서 핵심은 ES 모듈을 사용했기에 브라우저가 필요로하는 어플리케이션 일부만 변환하고 제공한다는 것이다 !
vite는 자바스크립트 모듈을 두 가지로 나눈다.
- 의존성 모듈
node_modules 로 import 되는 자바스크립트의 모듈이다. 이는 개발하는 동안 자주 바뀌지 않는다.
이 모듈은 Esbuild를 사용하여 처리한다.
webpack이 브라우저 요청전에 모든 자바스크립트 모듈을 처리하는 반면, vite는 브라우저 요청전 의존성 모듈만 번들링한다.
- 소스코드
.jsx , .scss 등의 라이브러리 확장자를 포함할 수 있으며 자주 수정되는 파일이다.
소스코드 전체는 동시에 로드 될 필요가 없다.
