highlight.js で一部の言語のみに対応して webpack のビルドサイズを減らす方法

こんにちは、フロントエンジニアの ku6ryo です。
コード文字列をハイライトしてくれる highlight.js を使う機会があったのですが、highlight.js のライブラリ全体のファイルサイズが大きくて webpack ビルドのサイズを大きくしていたので必要な言語のみ対応して、ビルドサイズを大幅に削減する方法を紹介します。

まず、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 を呼ぶときと同じように使えば OK です。

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

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

上記の言語セットの場合、Gzip 前 19KB、Gzip 後 7.14 KB になります。Gzip 前 700 KB 以上、Gzip 後 200 KB 以上のサイズ削減になります。これはだいぶ大きですよね！ highlight.js 使っている方はぜひやってみてくださいね〜