문제점
네이버 부스트캠프에서 진행하고 있는 AlgoITNi프로젝트에서 아래와 같은 문제가 발생했다.
빌드하는 과정에서 이러한 경고 메시지가 발생한 것이다.
특정 청크가 500KB보다 크다는 것이 문제이다.
위 사진을 보면 번들사이즈가 1285kb이고, 사용자가 실제로 받는 번들사이즈인 gzip사이즈가 425.33kb이라 초기 렌더링이 느려질 수 있다는 문제가 있다.
청크 사이즈 줄이기
청크 구조 분석하기
원인을 알기위해서 vite-bundle-visualizer를 사용해서 청크의 시각적인 분석을 해보았다.
highlight.js가 번들의 절반을 차지하고있었다.
highlight.js는 에디터에서 코드하이라이팅에 사용되는 라이브러리인데, 여러가지 언어를 모두 지원하기때문에 이렇게 라이브러리 사이즈가 커지는 것이다.
우리가 필요한 언어만 번들링에 포함시키면 됐다.
번들 사이즈 줄이기
다행히 highlight.js에서 부분적인 import를 지원해주어서 해당 언어만 가져오는 형태로 개선할 수 있었다.
import codeHighlighter from 'highlight.js/lib/core';
import python from 'highlight.js/lib/languages/python';
import javascript from 'highlight.js/lib/languages/javascript';
codeHighlighter.registerLanguage('python', python);
codeHighlighter.registerLanguage('javascript', javascript);
export default codeHighlighter;에디터 하이라이팅을 요런식으로 처리해주었다.
import codeHighlighter from "@/configs/highlightCodeConfig";
const highlightCode = (language: string, code: string) => {
return codeHighlighter.highlight(code, { language }).value.replace(/" "/g, ' ');
};
export default highlightCode;위의 highlightCode함수를 에디터에서 사용해주면, 라이브러리 의존성도 줄일 수 있기에 이렇게 처리해주었다.
결과
파란색 부분이 엄청나게 줄었음을 확인할 수있다.
비교해보기
이전 상태와 비교해보자.
번들사이즈가 엄청나게 줄어들었다...!
그림뿐만 아니라 숫자로도 명확하게 확인해보자.
번들 사이즈가 gzip기준 425.33kb(1285.20kb)에서 134.69kb(402.03kb)로 약 68% 감소했고,
빌드 시간이 6.07s에서 3.14s로 약 48% 감소했다.
| 이전 | 개선후 | |
| 번들사이즈 | 425.33kb (1285.20kb) | 134.69kb (402.03kb) |
| 빌드 시간 | 6.07s | 3.14s |
