DVERSE / FRONTEND SYSTEM
Bundle & Build.
흩어진 코드가 브라우저에 도착하는 형태로.
동작 원리 시뮬레이션
시작소스와 import
핵심모듈 그래프
결과실행 가능한 청크
01 / FOLLOW THE PROCESS
한 단계씩, 연결해서 이해하기
의존성 탐색부터 변환, 최적화, 청크 분리까지. 빌드가 코드를 어떻게 바꾸는지 단계별로 확인합니다.
프로덕션 빌드단계 탐색
01 / 06
STEP 01
Source
소스
애플리케이션은 여러 파일과 패키지로 구성됩니다. 빌드는 진입점에서 출발해 필요한 코드를 찾습니다.
단계별 예시
1src/
2 app.tsx
3 components/Chart.tsx
4 styles.css
- 들어오는 것
- .tsx · .ts · .css
- 나오는 것
- 빌드 진입점
EXAMPLE / 06 STEPS
단계를 선택해 입력 파일이 배포 결과물로 변하는 과정을 살펴보세요. 모션이 꺼져 있어도 노드와 단계 버튼으로 탐색할 수 있습니다.
STATE AT THIS STEP
코드가 담기는 위치
app.tsx모듈 그래프
chart.tsx모듈 그래프
react모듈 그래프
styles.css모듈 그래프
빌드 크기 예제를 불러오는 중입니다.
KEEP EXPLORING
흐름 다음에는, 각자의 역할.
같은 과정 안에서도 각 구성 요소가 책임지는 일은 다릅니다.