highlight.jsとcheerioのバンドルサイズを削減した時の備忘録

本記事は、highlight.jsとcheerioを使用した際にバンドルサイズが思ったより膨れ上がり、ダイエットさせた時の備忘録。

膨れ上がった原因その１　

• highlight.jsをそのままimportしていた。

import hljs from 'highlight.js'; 
...

この場合、highlight.jsが対応する各言語のモジュールが全てインポートされてしまう。

対応

特定の言語のみ記述・ハイライトすれば良いので、ニッチな言語のモジュールはバンドル対象外となるように必要な言語分だけインポートさせていく。

以下は、例としてJavascriptのみモジュールをインポートした時のコード。

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

hljs.registerLanguage('javascript', javascript);

以下、特定言語(15種類ほど)のみインポートした時の、バンドルサイズを対応前と比較したレポート。

-	対応前	対応後	差
size(Gzipped)	265.84kb	133.91kb	-131.93kb
analyze			-

• 参考記事
  • https://blog.mitsuruog.info/2017/12/how-bundle-size-makes-smaller
  • https://bjacobel.com/2016/12/04/highlight-bundle-size/

膨れ上がった原因その２　

• cheerio使ってハイライト箇所を抽出していた

マークダウン形式のhtml情報から、コード箇所を抽出するために、以下のようにcherrioを使用して、html要素を書き変える実装をしていた。

const $ = cheerio.load(article.body);
$('pre code').each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass('hljs');
});

body = $.html();

対応

highlight.jsの機能であるinitHighlighting()をクライアント側でhtmlのレンダリング時に、実行されておけばcherrioを使う必要がなかった。

そのため、こちらは削減というよりcherrioごと削除して対応した。

initHighlighting( )は、ページ内の全ての<pre><code>ブロックをハイライトする機能。

• 参考記事
  • https://microcms.io/blog/syntax-highlighting-on-server-side/
  • https://doitu.info/blog/5a9fe5e3ab60b20097abdb7d