Next.jsでバンドルサイズを分析し高速化につなげる

Webpack Bundle AnalyzerをNext.jsで使えるようにした、@next/bundle-analyzer を使ってバンドルサイズを計測してみます。

https://www.npmjs.com/package/@next/bundle-analyzer

インストール

@next/bundle-analyzer を追加します。

yarn add @next/bundle-analyzer

next.config.js

next.config.jsを以下のように書きます。

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

const config = {
    // 省略
};

module.exports = withBundleAnalyzer(config);

package.json

ANALYZE=true next build で実行できますが、scriptに書いておきます。

"scripts": {
    "analyze": "ANALYZE=true next build" // 追記
},

計測する

以下のコマンドを打ちます

yarn analyze

しばらくすると client.html と server.html が作られてブラウザで開きます。
これは client.html の方です。


何のサイズが大きいかを視覚的に見れるのがいいですね。

最後に

現状は特にネックになってることはないですが、今後問題が出てきたときに、分析して解消してみようと思います。