Dark

highlight.jsを軽量化するには対応言語を減らす

必要な言語だけ読み込むようにしたら、highlight.jsのサイズを1.04MBから53.31KBまで減らせました。

まずは減らす前のhighlight.jsを見て欲しい。これはnuxt build --analyzeした結果です。

before_highlightjs

before_highlightjs_small

1.04MBあります。(Stat sizeの意味はこちら
特にmathematicaが巨大です、私はあまり使わないのに。

そこで、普段使うbash, css, js, plaintext, rubyだけ読み込むようにすると、53.31KBまで減りました。

after_highlightjs

コード

必要な言語だけ読み込むコードです。
ポイントは、highlight.js/lib/highlightからhighlightを読み込むことと、
registerLanguage()で言語を登録することです。

import highlight from "highlight.js/lib/highlight";
import bash from "highlight.js/lib/languages/bash";
import css from "highlight.js/lib/languages/css";
import javascript from "highlight.js/lib/languages/javascript";
import plaintext from "highlight.js/lib/languages/plaintext";
import ruby from "highlight.js/lib/languages/ruby";

highlight.registerLanguage("bash", bash);
highlight.registerLanguage("css", css);
highlight.registerLanguage("javascript", javascript);
highlight.registerLanguage("plaintext", plaintext);
highlight.registerLanguage("ruby", ruby);

参考

Share:
記事一覧
Dark