![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4zZ3Z%2Fbtstxp6orY7%2FGdUD2VeC9hmt0uBerHkCx1%2Fimg.png)
해당 글은 우아한테크코스 5기 프로젝트 "동글"의 번들 사이즈를 최적화하면서 겪은 문제와 그 해결과정을 담은 글입니다. 1. highlight.js란? 프로젝트 동글은 글에 존재하는 코드블럭을 이쁘게 스타일링 해주어야 했다. highlight.js 라이브러리를 통해 그 목적을 달성할 수 있다. 2. 개선 이유 동글의 production 번들의 패키지를 bundleAnalyzerPlugin로 분석한 결과 highlight.js가 번들 사이즈의 약 25%(286KB/1180KB)를 차지하고 있었다. 동글은 개발자가 타겟 유저층이므로 코드블럭을 꾸미는 것은 필수 기능에 해당한다. 하지만 너무 큰 사이즈로 인해 로딩이 길어져 사용자 경험에 좋지 않다. 3. 문제 상황 인식 및 해결과정 문제 상황 문제는 high..