highlight.jsを小さくバンドルする方法
2017-12-21

highlight.jsを小さくバンドルする方法

プロジェクトのwebpackのバンドルサイズを計測して見たところ、highlight.jsが結構な割合を占めていたので、サイズを小さくする方法を試してみました。

はじめに

この辺りの記事を参考にしています。

import文の書き方でサイズが小さくなる

結論からいうと、面倒でも利用する言語ファイルをimportした方がサイズが小さくなります。

通常のやり方。

// 750.01KB
import highlight from "highlight.js";

750.01KB。うーん。でかい。。。
なんだか全ての言語ファイルがバンドルされている気がする。。。

次は使う言語だけimportした場合。

// 36.36KB
import highlight from "highlight.js/lib/highlight";

import javascript from "highlight.js/lib/languages/javascript";
import css from "highlight.js/lib/languages/css";
import java from "highlight.js/lib/languages/java";
import xml from "highlight.js/lib/languages/xml";

highlight.registerLanguage("javascript", javascript);
highlight.registerLanguage("css", css);
highlight.registerLanguage("java", java);
highlight.registerLanguage("xml", xml);

36.36KB!!
かなりスリムになりました。

なぜサイズが小さくなったのか?

npm installしたhighlight.jsの中身を見ると、全ての言語ファイルを呼び出していました。
そのため、import highlight from "highlight.jsしただけの場合、自動的に全ての言語ファイルもバンドルされてしまいます。

var hljs = require('./highlight');

hljs.registerLanguage('1c', require('./languages/1c'));
hljs.registerLanguage('abnf', require('./languages/abnf'));
hljs.registerLanguage('accesslog', require('./languages/accesslog'));
hljs.registerLanguage('actionscript', require('./languages/actionscript'));

...

module.exports = hljs;

なるほど、面倒でも一つ一つimportした方が良さそうですね。

まとめ

こんな単純なことでバンドルサイズが減らせるとは。恐ろしや。。。

サイズの測定は一度webpackでビルドしてからdanvk/source-map-explorerを使って測定しました。

作業していたらこんな記事を見つけました。アプローチは同じです。