web
Next.jsでバンドルサイズを分析し高速化につなげる
公開日:2022年2月26日
最終更新日:2022年2月26日
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
の方です。
何のサイズが大きいかを視覚的に見れるのがいいですね。
最後に
現状は特にネックになってることはないですが、今後問題が出てきたときに、分析して解消してみようと思います。
Read next
- 2022年2月20日next-pwaを使ってPWA対応する
- 2022年1月23日Next.js × algoliaで検索機能を実装する
- 2022年1月15日Next.js × microCMS × VercelでOGP画像をブログのタイトルで自動生成する