1) 사용자가 브라우저를 열고 주소를 입력
2) 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받음
3) 이 파일을 브라우저가 실행하여 웹 애플리케이션을 사용자에게 제공
HTML, CSS, JavaScript 파일을 그대로 전송한다면 생길 수 있는 문제들
- 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어남.
- 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소.
- 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기가 어려움. 결국 그대로 공백을 되돌려서 코딩.
- 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생.
- 작은 용량을 지원하는 오락기에서 게임 구현하기 위해
: 기존에 만든 그래픽 패턴을 재사용 한다거나, 색 표현 범위를 최소화하는 등 최적화 절차..
[npm trend] 유명 JavaScript 번들러와 webpack 비교
- 웹팩(webpack) 이 압도적 1위
.jpg
나 .png
같은 이미지 파일들도 전부 포함한 포괄적인 개념React에서의 빌드
npm run build
를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해준다.
로딩 시간에 따른 유저 이탈률