webpack-bundle-analyzer で Nuxt の JS ビルド結果を解析する

webpack-bundle-analyzer で Nuxt の JS ビルド結果を解析して、ページ遷移の転送量を削減する手法を紹介します。

webpack-bundle-analyzer

webpack-bundle-analyzerは Webpack を用いたソースのビルドで、ビルドされたファイル内のモジュール毎のファイル容量を確認するためのツールです。
Webpack などを用いた 大規模な JS アプリケーション開発では、ふとした記述で ビルドした結果のJSファイルが大きく膨らむなどして、通信容量を圧迫するケースが発生しがちです。

また Nuxt.js のプロジェクトでプリレンダリングを実施する場合、ページごとに生成された js ファイルが共通のモジュールを保有することで、全体としてのファイル容量に無駄が生じるケースも多々あります。

このような全体としてのファイル容量の調整を、コーディング上で完璧に整えて管理するのは意識の上でも負担が大きいため、
定期的に webpack-bundle-analyzer で JS ファイルごとのモジュールサイズを確認するのが 良いでしょう。

導入

nuxt.config.jsbuild セクションに 以下のようにして analyze セクションを追加します。

module.exports = {
  ...
  build: {
    analyze: {
      analyzerMode: 'static'
    },
  ...
}    

nuxt generate を実行すると、自動的に モジュール内のサイズが計測され、結果が .nuxt/dist/report.html に出力されるようになります。

ファイルサイズの調整

出力されたファイル群を確認すると、大きな vendor.xxxxxx.jsapp.xxxxxx.js の他にページ名で始まる幾つかのJSファイル群が確認できるでしょう。

これがページ固有の JS ファイルとなっており、ページそれぞれのJSデータが格納されるデータとなっています。これらのファイルはページ遷移ごとに個別に1つづつ読み込まれるもので、それぞれのページを表示するのに必要なデータを保持しています。

このページ固有のJSファイルが大きいと、ページロード時の遅延にも繋がるため、ページ個別のJSファイルも極力サイズの小さいものに整えておくのが良いでしょう。

ページ固有のJSセクション内で、例えば components のセクション内などに共通して出現するコンポーネントがある場合、それらを vendor 側にまとめて出力してやることで、読み込みを1回で収めることができます。

共通のコンポーネントを vendor の中に収めるには、 nuxt.config.js のbuild セクションに以下のように追記します。

module.exports = {
  ...
  build: {
    vendor: [
      '~/components/Footer.vue',
      '~/components/Header.vue'
    ]
  }
}    

設定を追加した後に再度 generate を実施することで、Footer.vueHeader.vue などの頻出コンポーネントが、ページ個別のJSファイルではなく vendor 側のJSファイルに移動したことが確認できるはずです。

ページコンポーネント内部で axiosmarked などのライブラリを import するケースでも同様にして vendor側にそのファイルの配置を移動させることが出来ます。ページ個別の JS ファイルには、極力 ページ固有で必要になるデータのみを配置させることで、ページ遷移に伴う追加のファイル読み込みを削減し、遷移時のストレスを最小限にすることが出来るようになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です