👀 빌드 ➡️ 웹팩(webpack)이 담당

👣 프로젝트에서 사용되는 JS 파일 안에서 불필요한 주석, 경고 메시지 공백 등을 제거하여 파일 크기 최소화
👣 브라우저에서 JSX 문법 or 최신 JS 문법이 원활하게 실행되도록 코드 트랜스파일 작업
👣 프로젝트 내 이미지와 같은 정적 파일 있으면 해당 파일 경로 설정

🟡 웹팩의 SplitChunks 기능을 이요한 코드 스플리팅은 효율적인 캐싱 효과 있음

🟡 코드 비동기 로딩을 통해 JS 함수, 객체, 컴포넌트를 필요한 시점에 불러와 사용

1. 자바스크립트 함수 비동기 로딩

👀 import() 함수 형태로 메서드 안에서 사용

👣 파일을 따로 분리시켜 저장, 함수가 필요한 지점에 파일 불러와 사용
👣 Promise 반환

2. React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

🟡 React.lazy와 Suspense 사용하면 state 따로 선언하지 않고도 코드 스플리팅 가능

1. React.lazy

👀 React.lazy

👣 컴포넌트를 렌더링 하는 시점에서 비동기적으로 로딩할 수 있게 해 주는 유틸 함수

2. Suspense

👀 Suspense

👣 코드 스플리팅된 컴포넌트를 로딩하도록 발동시킬 수 있음
👣 로딩이 끝나지 않았을 때 보여 줄 UI 설정 가능 ➡️ by. fallback props 

3. Loadable Components를 통한 코드 스플리팅

👀 Loadable Components

👣 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리
👣 서버 사이드 렌더링 지원
👣 렌더링 전에 필요할 때 스플리팅된 파일 미리 불러올 수 있음

👀 서버 사이드 렌더링

👣 웹 서비스의 초기 로딩 속도 개선, 캐싱 및 검색 엔진 최적화를 가능하게 해주는 기술
👣 초기 렌더링을 서버 쪽에서 처리 ➡️ 초기 속도 개선, 검색엔진에서 크롤링할 때 문제x