どうも kitamago です。

今回は @next/bundle-analyzer でビルド時に生成されたJSファイルのバンドル情報を可視化した際に、
highlight.js のバンドルサイズがなかなか大きく、
改善できればパフォーマンス向上に繋がるなと思い highlight.js のバンドルサイズ削減を行った際のメモです。

どのくらいバンドルサイズが大きいのか

実際に @next/bundle-analyzer を用いて、調べたところ以下のような結果となった。
赤い部分が highlight.js のバンドルサイズを占めているがサイズはなんと、287KB(Gzipped)。
これは最適化できると、かなりパフォーマンスの改善が期待できそう。

最適化を行う

How to use highlight.js
highlight.jsドキュメント(上記リンク)より、
デフォルトインポートだと全ての言語が登録されてしまう為、使用する言語のみのインポートを推奨しています。

import hljs from 'highlight.js';

そのためライブラリだけをインポートして、必要な言語だけを登録していきます。
今回はテストとして JavaScript と TypeScript のみを登録します。
(愚直ですが、公式でも推奨するやり方だから仕方ない、、)

import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/atom-one-dark.css';

import javascript from 'highlight.js/lib/languages/javascript';

import typescript from 'highlight.js/lib/languages/typescript';

import css from 'highlight.js/lib/languages/css';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('css', css);

// 使う箇所が多い場合は、外部モジュールとして切り出すと便利
export default hljs;

注意点

自分は公式ドキュメントを参考に作業を進めたので、詰まる点はあまりありませんでしたが
以下のようにインポートしている記事をネットで見かけました。

import hljs from "highlight.js/lib/highlight"

 この場合だと、/lib/highlight には定義が存在しない為、型定義ファイルが存在しないと叱られます。
どうしてもこのやり方でインポートしたい場合は、@ts-ignore を付けるか、require でインポートするか、型定義ファイルを作成すれば良いですね。 (ライブラリ外の定義を使う際に使用することがあるみたいです。)

結果

必要な言語のみをインポートするように変更した結果、
highlight.jsが占めるバンドルサイズが 10.13KB とかなり小さくなった事がわかりますね。