どうも kitamago です。 今回は <a href="https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer" target="_blank" rel="noopener noreferrer">@next/bundle-analyzer</a>&nbsp;でビルド時に生成されたJSファイルのバンドル情報を可視化した際に、 highlight.js のバンドルサイズがなかなか大きく、 改善できればパフォーマンス向上に繋がるなと思い highlight.js のバンドルサイズ削減を行った際のメモです。 <h2 id="hd767323906">どのくらいバンドルサイズが大きいのか</h2> 実際に <code>@next/bundle-analyzer</code> を用いて、調べたところ以下のような結果となった。 赤い部分が highlight.js のバンドルサイズを占めているがサイズはなんと、287KB(Gzipped)。 これは最適化できると、かなりパフォーマンスの改善が期待できそう。

<h2 id="he9a56c1ae0">最適化を行う</h2> <a style="background-color:#ffffff" href="https://highlightjs.org/usage/#:~:text=%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AF%E3%80%81%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%8C%E7%99%BB%E9%8C%B2%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="noopener noreferrer">How to use highlight.js</a> highlight.jsドキュメント(上記リンク)より、 デフォルトインポートだと全ての言語が登録されてしまう為、使用する言語のみのインポートを推奨しています。 <pre><code>import hljs from 'highlight.js';</code></pre> そのためライブラリだけをインポートして、必要な言語だけを登録していきます。 今回はテストとして JavaScript と TypeScript のみを登録します。 (愚直ですが、公式でも推奨するやり方だから仕方ない、、) <pre><code>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;</code></pre> <h2 id="h86c1eb6dfa">注意点</h2> 自分は公式ドキュメントを参考に作業を進めたので、詰まる点はあまりありませんでしたが 以下のようにインポートしている記事をネットで見かけました。 <pre><code>import hljs from "highlight.js/lib/highlight"</code></pre> &nbsp;この場合だと、<code>/lib/highlight</code> には定義が存在しない為、型定義ファイルが存在しないと叱られます。 どうしてもこのやり方でインポートしたい場合は、<code>@ts-ignore</code> を付けるか、<code>require</code> でインポートするか、型定義ファイルを作成すれば良いですね。 (ライブラリ外の定義を使う際に使用することがあるみたいです。) <h2 id="hb6509f48bf">結果</h2> 必要な言語のみをインポートするように変更した結果、 highlight.jsが占めるバンドルサイズが 10.13KB とかなり小さくなった事がわかりますね。

syntax highlightライブラリである highlight.js のバンドルサイズが大きかったのでパフォーマンス向上の為、バンドルサイズを最適化した際の備忘録

kitamago-log

JavaScript

highlight.jsのバンドルサイズを最適化する