[프로젝트 동글 최적화] 번들 사이즈의 25%를 차지하는 highlight.js 개선하기

해당 글은 우아한테크코스 5기 프로젝트 "동글"의 번들 사이즈를 최적화하면서 겪은 문제와 그 해결과정을 담은 글입니다.

1. highlight.js란?

프로젝트 동글은 글에 존재하는 코드블럭을 이쁘게 스타일링 해주어야 했다.

highlight.js 라이브러리를 통해 그 목적을 달성할 수 있다.

색이 입혀진 코드블럭

2. 개선 이유

동글의 production 번들의 패키지를 bundleAnalyzerPlugin로 분석한 결과 highlight.js가 번들 사이즈의 약 25%(286KB/1180KB)를 차지하고 있었다.

동글은 개발자가 타겟 유저층이므로 코드블럭을 꾸미는 것은 필수 기능에 해당한다.

하지만 너무 큰 사이즈로 인해 로딩이 길어져 사용자 경험에 좋지 않다.

3. 문제 상황 인식 및 해결과정

문제 상황

문제는 highlight.js를 사용하는 방식에 있다.

현재 highlight.js의 모든 코드를 한번에 불러오기 때문에,

유저는 gzip 기준 약 286KB에 달하는 리소스를 고스란히 요청하고있다(!)

무겁다

node_modules에 있는 highlight.js 폴더에 들어가면 그 이유를 알 수 있다.

index.js에서 모든 언어를 등록해서 export 하고 있기 때문이다.

무거운 이유가 있지

따라서 code spliting을 통해 필요한 언어에 대한 코드(js파일)만 들고오면 될 것이다.

요청하는 글에 있는 코드블럭의 언어만을 들고와야 하는데,

번들 과정에서는 요청하는 글이 어떤 코드블럭 언어를 이용하는지 알 수가 없기 때문에

글을 요청하는 런타임에서 동적 import를 이용해 필요한 언어에 해당하는 코드만 가져와보자.

해결 과정1: highlight.js에 동적 import 도입

highlight.js의 core만 들고온 뒤

필요한 언어만 동적으로 등록해주었다.

필요한 언어 모듈을 동적으로 불러온다

하지만 런타임에선 파일을 찾을 수 없다는 에러가 터졌다.

파일 인식을 하지못한다

node_modules에 들어가서 highlight.js의 package.json을 까보니 exports에는 딱히 문제가 없는 것 같았다.

그래서 원인 파악을 계속 하다가..

webpack exports의 버그인 것 같았다. (관련 PR)

highlight.js와 webpack 레포지토리 둘 다 관련 이슈들이 많이 올라왔지만, 딱히 해결한 사람은 없었다.

exports의 *(와일드카드)가 실제로 적용되지 않는 버그

따라서 대체 라이브러리로 `prismjs`를 찾아내었다.

해결 과정2: `prismjs` 도입

npmtrends에서 `prismjs`를 발견했다.

notion이 쓰고있고, 이전에 개발 블로그를 만들었을 때 도입한 기억이 있다.

`prismjs`는 `highlight.js`에 비해 매우 가벼운 번들 사이즈를 자랑한다.

압도적인 힘의 차이

기본적으로 `prismjs`는 필요한 언어의 모듈을 일일히 가져와서 하이라이팅 하도록 설계되었다.

prismjs 사용예시

agda 언어 모듈

각 언어 모듈은 즉시실행함수로 되어있었고, 동적 import를 통해 모듈을 가져올 수 있다.

해결 과정3: html string 파싱과 동적 import

동글의 글은 서버에서 string형식의 html 코드를 받아와서 바로 렌더링하고 있다.

각 코드 블럭은 `<code className="language-javascript">` 와 같은 형태로 감싸져있기 때문에,

`language-*`에서 *부분을 가져와야했다.

따라서 regex에 맞는 언어들을 뽑아낸 다음 해당 언어에 해당하는 prism 모듈을 동적 import 하였다.

4. 결과

요청 리소스 최적화

highlight.js (변경 전)

전체 언어 모듈을 들고온다

prism.js + dynamic import (변경 후)

필요한 언어 모듈만 불러온다

요청 리소스가 2.0MB -> 1.6MB 로 약 400KB 감소하여 약 20%의 리소스를 절약하였다!

스타일 변경

highlight.js와 prismjs

코드블럭 스타일의 변경도 있다.

참고로 오른쪽 `prismjs`는 노션과 같은 스타일이다.

동글은 노션 연동을 제공하기 때문에, 노션을 익숙한 유저들의 사용자 경험을 그대로 이어준다는 부분에서도 의미가 있다!

5. 최적화 후기

간단할 줄 알았지만,, 생각보다 삽질을 많이했다.

사실 위에서 나열한 해결과정 1, 2, 3은 시간순서가 아니다.

실은 2, 3, 1 순으로 해결했고, highlight.js가 code spliting을 제공하지 않는다고 생각해서 `prismjs`를 바로 도입했었다.

 

즉 prismjs로 최적화 후 highlight.js를 이용하면서도 동적 import를 도입할 수 있을 것 같아 라이브러리를 까보면서 시도해본 흔적이다🙂

물론 webpack 설정 exports 필드의 버그때문에 목적달성은 못했지만, 단순 docs나 블로그들에 적혀있는 사용방법 외에 주도적으로 라이브러리 이용방법을 구상해봤다는 점에서 한단계 성장했다고 생각한다😎