highlight.js에서 일부 언어 만 지원하는 webpack 빌드 크기를 줄이는 방법

안녕하세요, 프론트 엔지니어 ku6ryo입니다.
코드 문자열을 강조 표시하는 highlight.js 빌드 크기를 크게 줄이는 방법을 소개합니다.

첫째, highlight.js의 크기는 webpack으로 build 했을 경우, Gzip 하지 않으면 사이즈가 746.69 KB, Gzip 하면 246.18 KB 의 사이즈가 있습니다.



어쨌든, 매우 큰 크기는 대체되지 않습니다 (땀)
모든 대응 언어를 읽어 버리면, 이와 같은 사이즈가 됩니다.
필요한 언어만 로드하려면 다음과 같이 필요한 언어의 파일만 로드하는 구성 파일을 만듭니다. 예를 들어, Javascript, CSS, JSON에만 해당하려면 다음과 같은 파일을 만듭니다.

// my-highlight.js
import hljs from 'highlight.js/lib/highlight'

hljs.registerLanguage('css', require('highlight.js/lib/languages/css'))
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))
hljs.registerLanguage('json', require('highlight.js/lib/languages/json'))

export default hljs

그리고이 파일을 highlight.js를 호출 할 때와 같이 사용하면 괜찮습니다.

// 通常
import hljs from 'highlihgt.js'

// 必要なものだけ読み込む
import hljs from './my-highlight.js'

위 언어 세트의 경우 Gzip 전 19KB, Gzip 후 7.14KB입니다. Gzip 전 700KB 이상, Gzip 후 200KB 이상의 크기를 줄일 수 있습니다. 이것은 상당히 큽니다! highlight.js 사용하고있는 분은 꼭 해보세요 ~