도데체 프론트 엔드 빌드는 왜하나요?
출처 프롱트님 유튜브
프론트엔드 빌드 도구는 참 많죠,
(webpack, vite, esbuild, rollup.js, yul , grunt, parcel..... )
빌드는,
당연히 해야죠.
빌드가 뭔가요?
일단 번들링은요,
보통 요즘
리액트나 이런거로 개발 많이 하죠,
그러면
컴포넌트들이 굉장히 많잖아요,
그많은 파일들을,
각각 서버와 요청을 한다면,
왕복 시간이 오래걸리겠죠,
그래서
모듈로 만들어논,
파일들의 관계를 분석해서,
하나의 번들로 만듭니다.
하나의 번들로 만들어서
배포를 보통 합니다.
빌드 단계에서
번들로만드는 과정이 포함되어있는거죠.
타입스크립트 문법이나,
리액트 문법 jsx이런거
트랜스파일링 해서
표준적인 자바스크립트문법으로 바꿔주고,
이것도
빌드 단계에서 포함됩니다.
폴리필
폴리필은 코드의 조각인데요,
어떤 api 함수들이 지워이 안될떄,
폴리필들을 빌드단계에서 추가를 해줍니다.
안쓰는 코드 정리하기
용량줄고 로딩속도도 더 나올 수 있고
css build
css도 현대화된 문법들은 많은걸 지원하죠,
sass less 같은 csss preprocessor
요즘은
css in js 같은 스타일 컴포넌트나, 이모션 이런거죠
테일윈드같은거
브라우져에서는 지원이 안되니까,
컴파일 과정은 필요하고,
빌드 단계에서,
각각의 라이브러리가 지원되는 방법을 이용해서,
빌드를 하면 됩니다.
코드 스플리팅
당장 필요가 없는 코드들은,
나중에 가져오는 방법을 쓸수 있거든요,
그거를 코드분리 라고 해서 코드 스플리팅 기법이라고 하는데,
어떠한 chunk 단위라고 해서,
빌드가 된 번들 파일을 여러개의 chunk 단위로 나눕니다.
뭐 예를들어,
로딩시간에는 가져오지 않고,
지연해서 가져오거나,
어떤 필요시점에 가져오게하는
기법들을 많이 사용을 하죠,
이거 쓰면 로딩속도는 좀더 빨리지겠죠.
아무래도 다운받는게 로딩떄 많이 줄어들잖아요.
그외
파일의 캐싱관리
개발모드와 프러덕션모드
다국어 리소스 추가
서버빌드(서버에서 사용가능한 구조)
요즘은,
next.js 같은 것들 이용해서,
클라이언트 빌드,
서버빌드
이렇게
나눠져 있죠,
그런 빌드환경을 만드는데도,
빌드 도구가 많은 도움을 주고있습니다.
