巨大な latest.json のバンドルサイズを削減する方法

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

私が作成している Next.js アプリを Lighthouse で確認してみたところ、最初に読み込まれる JS のサイズが大きく、その中でも moment-timezone に含まれる latest.json がかなり大きかったので削減してみました。
今回はその方法について書いていきます。

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

最適化の前に現状のバンドルサイズを確認しておきましょう。

Next.js でのバンドルサイズは @next/bundle-analyzer というライブリを使用して確認することができます。
以下の記事で詳しく解説していますのでよければ参考にしてください！

Next.js で JS バンドルサイズを削減して高速化する方法

Lighthouse で「Remove unused JavaScript」が表示された場合の対処方法である JS バンドルサイズの最適化について解説しています。

gizanbeak.com

原因を確認

@next/bundle-analyzer を実行すると　client.html へ上記のように各チャンク毎にバンドルされているライブラリが色分けされて表示されます。

その中でも moment-timezone で使用している latest.json というファイルが特に巨大なのがわかると思います。

では問題となっている箇所を確認できましたので、latest.json を最適化していきましょう。

バンドルサイズを最適化

デフォルトでは latest.json は全てのタイムゾーン設定を記載している json ファイルのためサイズがかなり大きくなっています。

そこで、使用するタイムゾーンの設定のみを適用することで最適化をおこなっていきます。

ライブラリをインストール

タイムゾーンの設定を日本のデータのみへ変更するには moment-timezone-data-webpack-plugin というライブラリを使用します。

GitHub - gilmoreorless/moment-timezone-data-webpack-plugin: Reduce moment-timezone data size for a webpack build

Reduce moment-timezone data size for a webpack build - gilmoreorless/moment-timezone-data-webpack-plugin

github.com

まずは、以下のコマンドで moment-timezone-data-webpack-plugin をインストールします。

npm install --save-dev moment-timezone-data-webpack-plugin

もしくは

yarn add --dev moment-timezone-data-webpack-plugin

next.config.js へ設定を追加

インストールが完了したら next.config.js へ moment-timezone-data-webpack-plugin を使用する設定を追記していきます。

デフォルトでは next.config.js というファイルが存在していないため、必要であればルート直下に作成してください。

Next.js で webpack の plugin を使用する場合は公式ドキュメントにあるように記載していけば OK です。

具体的には以下のように記載します。

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin')

module.exports = withBundleAnalyzer({
  webpack: (config) =>  {
    config.plugins.push(
      new MomentTimezoneDataPlugin({
        matchCountries: 'JP'
      })
    )
    return config
  },
})

matchCountries へ JP を設定することで日本のみのデータに限定しサイズを削減しています。
これで最適化は完了です。

結果を確認する

最適化が完了したら再度バンドルサイズを確認してみましょう。

上記のように client.html へ表示されている latest.json が小さくなっていれば成功です。

色が変わっていますが、半分ほどの大きさだった latest.json が見事に見えないくらい小さくなっていることがわかりますね。

サイズも無事 84.28KB → 58.77KB まで小さくなっています。

まとめ

ふと導入したライブラリの影響でいつの間にバンドルサイズが大きくなってしまいパフォーマンスへ影響を与えてしまう場合があります。
いつの間にか遅いサイトになっていた、とならないようこまめに確認しておきたいですね。

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

Gizanbeak