https://velog.io/@lingodingo/빌드-속도를-올려보자feat.-esbuild

사내에서 발표했던 것을 정리한 내용이다

개발자는 코드를 수정하자마자 바로 반영되기를 원한다. 하지만 그 시간 차가 20분 정도 난다고 하면 얼마나 짜증이 날까..? 이 시리즈는 배포 속도를 최대한 끌어올려 본 경험을 정리한 것이다.

😎 현재 배포 환경

보통 프론트엔드에서의 배포라고 함이라면,

1. master에 머지 (PR이든 직접 Push든)
2. CI에서 해당 레포가 머지됬단 걸 확인
3. 인스턴스(VM) 부팅, 리눅스 및 노드 설치, 레포내의 코드 옮겨오기
4. 패키지 설치
5. package.json에 설정되어 있는 커맨드를 통해 번들러(Webpack)를 실행하여 빌드 시작
6. 결과물을 S3에 파일 업로드

위의 작업을 실행하는데 현재 7분이 걸린다. dev(alpha), production순으로 동기적으로 하면 총 14분이 배포에만 걸리는 시간이다. 끔찍하지 않은가?

전 회사에선 배포까지 20분이 넘게 걸렸었던걸로 기억하는데.. 꽤나 고통받았던 기억 밖에 없다. (CI 스크립트를 테스트 하기 위해선 정말 시간과의 싸움이었다)

어쨌든, 배포 하는 시간 중에서 **빌드**할 때가 너무 느려서 골치를 앓던 중(배포 속도 꼴지였음 ㅎㅎ) 사내 슬랙에서 동료 프론트 엔지니어분이 흥미로운 번들러를 알려주셔서 한 번 시도해보기로 했다.

내가 모든걸 결정할 수 있기 때문에 아무런 방해없이 과감하게 시도해 보기로 하였다.

참고, 기술스택: Webpack 4, React, Typescript

🤔 왜 이렇게 빌드가 느려터진거야?