highlight.jsの設定を見直してwebpackのバンドル後のファイルサイズを削減する

nuxt build --analyze を実行してバンドルファイルを視覚化する方法をまとめました。

上記のコマンドは内部でwebpack-bundle-analyzerを実行します。このブログはNuxt.jsで実装しており、試しに上記のコマンドを実行したところ、highlight.jsが原因でバンドル後のファイルサイズが肥大化していることが分かりました。この記事ではファイルサイズを削減するために対応した内容について記述します。

参考: https://ja.nuxtjs.org/api/configuration-build/#analyze

対応内容

このブログはマークダウン形式で記述した記事をmarkedでHTMLに変換しています。また、HTMLに変換する過程でhighlight.jsを実行してシンタックスハイライトを適用します。

highlight.jsをES6 modulesとして読み込んだ場合、対応している全ての言語ライブラリを読み込みます。不要な言語ライブラリを読み込んでいる状態は効率的ではないので、必要な言語ライブラリのみ読み込む方法をhighlight.jsは提供しています。

The default import imports all languages. Therefore it is likely to be more efficient to import only the library and the languages you need:

// https://github.com/highlightjs/highlight.js/tree/10.1.2#es6-modules
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
hljs.registerLanguage('javascript', javascript)

上記の方法を参考に、このブログ内で使用している言語のライブラリのみ読み込むよう修正しました。

結果

修正前と比較すると、チャンクのサイズを約1/10に削減できました。