프론트엔드 빌드에서 일어나는 과정

1. 빌드

빌드란?

빌드란 개발자가 작성한 소스코드를 브라우저가 실행가능한 형태로 변환하는 과정입니다.

 

빌드 도구

프론트엔드엔 다양한 빌드도구가 존재합니다.

예시로 webpack, vite, esbuild, rollup.js , parcel, 등이 있습니다.

 

2. 빌드 과정속에 일어나는 일

1. Transpiling

우리가 작성한 타입스크립트 코드는 브라우저가 해석할 수 없어요.

자바스크립트 문법이 아니기 때문입니다.

리액트의 JSX 문법도 해석할 수 없기 때문에 변환과정이 필요해요.

브라우저가 해석할 수 있도록, 브라우저가 아는 문법으로 변환하는 트랜스파일링 과정이 필요합니다.

추가로, 타입스크립트를 사용하면 타입체킹 과정이 빌드과정에 포함되어 있어요.

흔히 들어본 폴리필도 빌드과정에 지원되지 않는 문법을 해석할 수 있도록 빌드단계에서 도와줍니다.

 

2. Bundling

코드들을 하나의 번들 파일 혹은 여러 개의 chunk 파일로 합치는 작업입니다.

 

3. 코드 최적화

크기를 줄여 로딩 성능을 향상시키기 위해 다양한 최적화 작업을 수행합니다.

 

Minification

주석, 공백, 불필요한 문자를 제거

 

TreeShaking

사용되지 않는 코드를 제거해 최종 파일 크기를 줄임

 

CSS 최적화

사용되지 않는 CSS를 제거하고 압축

 

 

4. 환경 설정

환경별로 적절한 설정을 주입합니다.

예시로, .env 파일에 환경마다 변수를 설정하곤 하는데요. 빌드과정에서 주입과정이 일어납니다.

 

5. Code Splitting

APP의 특정 부분만 로드할 수 있도록 코드를 나눕니다.

Webpack의 Dynamic import 나, React의 `React.lazy()` 혹은 `Suspense` 가 예시로 있습니다.

 

6. 캐싱 최적화

파일 내용이 변경될 때 마다 고유한 해시를 생성합니다.

예: `main.abc123.js` → `main.def456.js`

 

7. 테스트 및 정적 분석

코드의 품질을 보장하기 위한 사전 검증 작업을 수행합니다. linkting이나 타입스크립트의 타입검사, 혹은 테스트 가 있습니다.

 

8. 빌드 결과 배포

최종적으로 빌드된 파일을 배포 가능한 형태로 준비합니다.