プロジェクトの webpack のバンドルサイズを計測して見たところ、highlight.jsが結構な割合を占めていたので、サイズを小さくする方法を試してみました。
はじめに
この辺りの記事を参考にしています。
- Reducing bundle size of Highlight.js with Webpack | Brian Jacobel
- Reducing bundle size of Highlight.js with Webpack 2 | Iris Schaffer
import 文の書き方でサイズが小さくなる
結論からいうと、面倒でも利用する言語ファイルをimport
した方がサイズが小さくなります。
通常のやり方。
// 750.01KB
import highlight from "highlight.js";
750.01KB。うーん。でかい。。。 なんだか全ての言語ファイルがバンドルされている気がする。。。
次は使う言語だけimport
した場合。
// 36.36KB
import highlight from "highlight.js/lib/highlight";
import css from "highlight.js/lib/languages/css";
import java from "highlight.js/lib/languages/java";
import javascript from "highlight.js/lib/languages/javascript";
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を使って測定しました。
作業していたらこんな記事を見つけました。アプローチは同じです。
- RxJS を小さくバンドルする方法。import 文の書き方で容量が変わる - Qiita https://qiita.com/clockmaker/items/5e2207b14dac97c4ede1