Nuxt.js（2系）に、webpack-bundle-analyzerというバンドルサイズを可視化できるツールがデフォルトで組み込まれている。
【参考】
Nuxt公式
webpack-bundle-analyzer
これを使ってプロジェクトのバンドルサイズ削減に取り組んだことを記録します
1. 使っている外部ライブラリの変更
lodashをlodash-esに変更。
約60kb削減
[変更前]
[変更後]
2. pluginsの登録を見直す
外部ライブラリのほとんどがpluginsとして登録されていた。
これだと全てのページで読みこまれてしまうため、必要な箇所が限定的なものは、プラグインの登録は削除し、各コンポーネントでインポートするようにした。
約400kb削減
(※webpack-bundle-analyzerのレポートは省略)
3. 特定のエクスポートのみをインポートする
下記のようにそのままインポートを記述すると全てのエクスポートが読み込まれてしまう。
使うオブジェクトだけをインポートするようにする。
【参考】
MDN import
(※何kb削減したかは記録していない)
(※webpack-bundle-analyzerのレポートは省略)
[変更前]
import lodash from 'lodash-es'
[変更後]
import { cloneDeep } from 'lodash-es'
4. Dynamic Import
各ページで表示するSVGの名前をpropsとして渡して使用するコンポーネントがあった。
SVGが追加される度にそのコンポーネントにSVGのインポートを追加し、全てのSVGをインポートしていた。
今回、SVGは必要なタイミングでインポートされるようにした。
SVGの量が多かったこともあり結構削減できた。
約180kb削減
(※webpack-bundle-analyzerのレポートは省略)
[変更前]
import alarm from '@/assets/img/icons/alarm.svg'
components: {
alarm,
}
[変更後]
components: {
alarm: () => import('@/assets/img/icons/alarm.svg'),
}
5. 使われていないライブラリを削除
webpack-bundle-analyzerで可視化することで使われてないライブラリも確認できる
(※何kb削減したかは記録していない)
(※webpack-bundle-analyzerのレポートは省略)
6. ライブラリ使用の見直し
プロダクトの仕様によっては、ライブラリの機能はリッチすぎるかもしれない。
ライブラリを使うか、自身で実装するかも検討する。
(※何kb削減したかは記録していない)
(※webpack-bundle-analyzerのレポートは省略)
後書き
まだまだ改善できることはあるかもしれません。
外部ライブラリを選定時には、ライブラリのバンドルサイズや、オプションでバンドルサイズを絞れるかどうか等も選定するときに考慮したい。
Nuxt.jsのpluginsは、外部ライブラリを使う場合に登録すると、各コンポーネントで毎度読み込まずに使用できるので便利ですが、使う場所が限定される場合は対象のコンポーネントで直接読み込むのが良さそうです。
Nuxt3ではwebpackからViteへ移行することもありそうですが、Viteでもできるようです。
【参考】
Nuxt.js 公式
rollup-plugin-visualizer