Next.jsのBuild Sizeを計測する
$ npm install -D @next/bundle-analyzernext.config.jsconst withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const config = { .. } // 他の設定
module.exports = withBundleAnalyzer(config)$ ANALYZE=true yarn build自動的にブラウザが開いて見れる
pathは
./.next/analyze/client.html とかかな設定にも依るとは思う
server側もある
./.next/analyze/server.html 上記のコードで「他の設定」をwithBundleAnalyzerに入れなかったら、next.config.jsに書いた設定を無視してAnalyze結果を見れる
だから両方試せばそこに追記したwebpackの設定などがどこまで効果あるか確認できる
next.config.jsconst withBundleAnalyzer = ..
const config = { .. } // 他の設定
module.exports = config // withBundleAnalyzerしない next build したときもページサイズが表示される緑、黄、赤でヤバさを教えてくれる
下の方に「First Load JS shared by all」という項目がある
内訳が出ている
ここに書かれているやつは全てのページでロードされる
pages/_app.jsとだいたい同じサイズになる感じかな
pages/_app.jsは全ページで読み込まれるので
全てのページで必要な共有ファイル
aaa+ First Load JS shared by all 300 kB
├ chunks/0eceb729.51e01a.js 2.08 kB
...
├ chunks/framework.570f60.js 40.6 kB
├ chunks/main.dbe6c6.js 7.19 kB
├ chunks/pages/_app.d851a7.js 2.6 kB
└ chunks/webpack.1c8d92.js 5.53 kBこのそれぞれのchunkがどの部分なのか特定したい #??
localでbuildしてLighthouseして、
どのchunkが問題があるのか特定できる
これ、chunkごとにまとまって見れるのね
Lighthouseで指摘されているやつと照合したいんだけど、やり方あるかな #??
名前はハッシュなので無理
production buildしてlocalで起動して、lighthouseしたらいけるか？
普通のwebpackなら
optimization.chunkIds とか設定すれば見れるらしい refWebpack v4→v5の変更点でできるようになった ref
参考