nuxtjsでwebpackのcacheGroupsを使ってJavaScriptとcssの分割方針を変える

Webページの高速化のする手法の一つにJavaScriptやcssなどのアセットを小さくして、細かいファイルにしてCDNにアップロードするというものがあります。

HTTP/2では1つのコネクション上で複数並列に扱うことができるので、ファイルを一つにまとめて通信回数を減らすより、ファイルサイズを小さくして平行に複数ファイル取得するほうが有利です。

nuxt.jsではnuxt.config.jsファイルのbuild部分がそのままwebpackの設定となるので、ここに設定を追加していくことでwebpackの設定を変更しビルドの方針を変えることが出来ます。

全部一つのファイルにまとめる場合

nuxt.config.js

{

  ... (省略) ...

  build: {
    optimization: {
      cacheGroups: {
        styles: {
          name: 'styles',
          minChunks: 1, // 1箇所以上で使われていたらlibraryとしてchunkに含める
          chunks: 'all'
          enforce: true // ファイルサイズの制限を無視してchunkをまとめる
        }
      }
    }
  }
}

この設定では1箇所以上で使われているファイルをビルド後のファイルサイズを無視してchunkに含めるということになるので、全てのコードが1つのchunkに詰め込まれて同じファイルになります。当然ファイルは大きくなります。

ファイルを複数に分割する場合

nuxt.config.js

{

  ... (省略) ...

  build: {
    optimization: {
      cacheGroups: {
        styles: {
          name: 'styles',
          minChunks: 5, // 5箇所以上で使われていたらlibraryとしてchunkに含める
          chunks: 'all'
          enforce: false // ファイルサイズの制限をできるだけ守るように分割する
          minSize: 30000, // 30kbを超えるようにファイル分割する
          maxSize: 1000000, // 100kbを超えないようにファイル分割する
        }
      }
    }
  }
}

このように設定するとファイルのサイズが30kb〜100kbの間に収まるように出来るだけ分割してビルドしてくれます。