[나만의 친환경 PJ] 왜 Vite를 선택했는가.(ft. 빌드,번들링)

lee·2024년 2월 21일

나만의 친환경 프로젝트

목록 보기

3/5

1. Vite를 왜 사용했는가?

빠른 개발 환경과 효율적인 프로덕션 빌드를 지원해주기 때문.

vite는 설치와 동시에 수정이 잘 일어나지 않는 의존성 패키지(컴포넌트 라이버리와 같은 모듈)들을 Esbuild를 사용해 사전 번들링을 한다. Webpack, Parcel과 같은 기존의 번들러 대비 10~100배 빠른 속도를 제공한다.
vite는 네이티브 자바스크립트 모듈(ES Module)을 기반으로 한 dev 서버이다.(Native ESM-ECMAScript Module)
Native ESM을 이용해 소스 코드를 제공한다. 쉽게 설명하면 수정된 모듈과 관련된 부분만 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.

기존에는 위 그림과 같이 모든 파일들을 번들한후 서버가 구동을 하였다. 그러니 파일이 커지고 프로젝트가 커질수록 서버 구동이 느려지는 것

하지만 Vite는 Native ESM을 사용함으로 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기때문에 서버 구동이 빠르게 이뤄진다.

이미지 출처 : https://ko.vitejs.dev/guide/why.html

2. 그렇다면 빌드,번들링,ESM 이 무엇인가?

- 빌드란?

소스 코드 파일을 실행 가능한 소프트웨어 산출물로 변화하는 과정.
아래 동작이 빌드 과정이다.
1. 인간이 고급언어(JavaScript)로 코드를 작성한다
2. 컴파일러와 어셈블러를 이용하여 컴퓨터가 이해할 수 있는 언어로 변환한다.
3. 링크를 거쳐 실행 파일이나 라이브러리 파일 등을 생성한다.
4. 컴퓨터가 번역된 코드를 읽고 실행한다.

많은 사람들이 컴파일과 빌드를 헷갈려 사용하는 경우가 있는데, 빌드 과정중 하나가 컴파일이라는 동작이 있는 것이다.
run을 실행하여 결과를 화면에서 볼 수 있는데 이때 Build Tool에 의해 모든 빌드과정이 실행이 된다.

- 번들링이란?

사전적인 의미로 '어떤 거을 묶다, 모으다'라는 뜻으로, 여러 코드와 프로그램을 묶어 사용자에게 웹 애플리케이션을 제공하는 핵심 과정이다.
*번들 도구 : WebPack, RequireJs, Parcel 등이 있다.

빌드 과정 중 하나로, 최종적으로 번들링 된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행한다.

1. 번들링의 이점

파일 크기 문제 해결 : 파일을 압축하여 번들 파일을 뱉기때문에 원본 파일보다 작아지고, 실행 속도와 로딩 속도를 향상합니다.
애플리케이션 임의 조작 방지 : 원본 파일이 아닌 번들링을 통한 파일이 나오기 때문에 사용자가 조작을 할 수 없게된다. 애플리케이션의 무결성과 보안을 강화한다.
파일 단위의 모듈 관리 : JavaScript는 기본적으로 전역 범위를 가지므로 여러 개의 JavaScript 파일이 있을 때 변수 충돌 등의 문제가 발생할 수 있다. 하지만 번들링 도구인 Webpack은 모듈 번들링을통해 이 문제를 해결해준다.

3. 번들 도구중 WebPack은 왜 등장했는가?

- 번들 도구중 Webpack에 관하여

Webpack은 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용되는 모듈 번들러이다. npm trends에서 확인해보면 가장 많이 사용하는걸 알 수 있다.

출현 배경

대형 작업으로 인해 JS파일이 증가하면서 각 변수들의 스코프 문제,각 자원(파일)을 호출할 때 생기는 네트워크 문제.
=> 위 문제를 해결하기 위해 모듈 번들러가 등장했다. Webpack은 모듈 번들러이다.

- Webpack이 제공하는 기능

번들링 : 웹팩은 HTML, CSS, JavaScript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 번들로 묶는다.
네트워크 비용 감소 : 웹팩은 각 자원을 일일이 서버에 요청해 가져오는 대신, 같은 타입의 자원을 요청하고 응답을 주고받아 네트워크 비용을 감소.
자바스크립트 문법 호환성 지원 : 웹팩은 babel-loader를 사용하여 자바스크립트 ES6 문법을 ES5로 변환 해주어 호환성 문제를 해결한다.
개발 및 프로덕션 모드 선택 : 웹팩은 개발 모드와 프로덕션(배포) 모드를 선택할 수 있다. 프로덕션 모드에서는 코드 난독화, 압축, 최적화 작업 등을 수행하여 성능을 향상시킨다.

- Webpack 파일 설정(webpack.config.js)

entry : 웹팩이 의존성 그래프를 그리기 시작하는 시작점 파일을 지정한다. 일반적으로 index.js파일을 사용
output : 생성된 번들을 내보낼 위치와 파일 이름을 지정한다. 일반적으로 dist 폴더에 bundle.js로 출력된다.
module : 웹팩은 모듈을 처리하기 위해 로더를 사용한다. 로더는 모듈을 변환하거나 의존성 그래프에 추가하는 역할을 함.
plugins : 플러그인은 번들을 최적화하거나 에셋을 관리하는 등의 작업을 수행.
mode : development(개발 모드) 또는 production(배포 모드)를 선택할 수 있다. 개발 모드는 디버깅 용이, 프로덕션 모드는 최적화된 번들 생성.

- Babel 이란?

최신 문법을 ES6+ 버전을 구버전인 ES5로 변환해주는 JS 컴파일러이다. 두 가지 역할을 수행한다.
1. 트랜스 파일러

기존 코드가 구표준을 준수하는 코드로변경.

폴리필 (Polyfill)

브라우저가 지원하지 않는 코드를 지원 가능하도록 기존 함수의 동작 방식을 수정하거나 새롭게 구현.
구현이 누락된 부분의 기능을 메꿔주는(fill in) 역할을 한다.

4. Vite vs Webpack 중 왜 Vite를 선택했는가.

Vite는 개발환경에서 ESbuild를 통해 번들링 속도에서 강점이 있다. 하지만 마이그레이션과 안정성 측면에서 문제가 있다고 한다.

개발 환경은 ESbuild를 프로덕션 환경에서는 Rollup으로 번들링을 수행한다.
그렇기에 프로덕션 환경 번들에서는 Rollup config를 Webpack과 성능이 비슷하게 하기 위해서는 CommonJS처리, Polyfill 처리 등 되어있지 않아 플러그인을 다 설치해야해서 번거롭다.

Webpack은 위 와 같이 모듈 번들러로써 네트워크 감소와 호환성 등 프로덕션 환경에서 매우 효율적이다.

결과 : 빠른 시일내에 완료를 해야하는 프로젝트였기에 Vite를 사용하여 개발시 빠르게 진행할 수 있도록 Vite를 선택하였다.