Gizanbeak

こんにちは！ Syuu（ @syuu_n18）です。

Lighthouse を回していると Remove unused JavaScript という表記がでてスコアが下がってしまう場合があります。
これは JS バンドルサイズが大きいことが原因で発生している可能性がありますので、今回は Next.js で作成したアプリの JS バンドルサイズを確認する方法とその最適化について紹介していきます。

バンドルサイズを確認する

まずは、バンドルサイズを確認する必要があります。
Next.js でバンドルサイズを確認するのは @next/bundle-analyzer というライブリを使用します。

インストール

npm install @next/bundle-analyzer

もしくは

yarn add @next/bundle-analyzer

上記のコマンドでインストールします。

事前準備

インストールが終わったら、next.config.js に先程インストールした @next/bundle-analyzer を使用する設定を記載していきます。
デフォルトでは next.config.js というファイルが存在していないため、必要であればルート直下に作成してください。

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // config
})

上記で　ANALYZE=true という環境変数を追加することで @next/bundle-analyzer が使用できるようになったため、次は package.json の scripts へ以下のようにコマンドを追加します。

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "analyze": "ANALYZE=true next build"
  },

バンドルサイズの確認

これで @next/bundle-analyzer を使用する準備が完了し、以下のコマンドで実行できるようになっていますので早速実行してみましょう。

yarn analyze

以下のような色分けされた html が表示されたら成功です。

クライアントとサーバーの2つの html が生成されますが、今回は client.html を確認すれば OK です。

各チャンク毎にバンドルされているライブラリが色分けされており、四角のサイズがそのままバンドルサイズとして表現されています。

特に左下の latest.json が大きな割合を占めていることがわかると思います。
これは moment-timezone で使用しているものになりますね。

左上もかなり大きなチャンクになっていますが、こちらは別の方法で最適化していますので後日記事にしようと思います。

バンドルサイズを最適化

基本的には上記の手順でバンドルサイズを確認できたら、四角のサイズが大きいものから順に最適化を施していくと効率的におこなうことができます。

最適化方法については様々なやり方があるため、ここでは moment-timezone というライブラリで使用している巨大な latest.json というファイルを最適化する方法について記載しています。

latest.json

この latest.json の最適化方法については以下の記事で詳しく解説しています！

まとめ

いかがだったでしょうか？

バンドルサイズが大きすぎると最初のページロードが遅くなり、使いづらいサイトとなってしまいます。
最適化は1つ1つ見ていく必要があるため大変な作業ではありますが、時間を見つけてやっていきたいですね。

ここまで読んでいただきありがとうございました！