web

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

公開日:2022年2月26日
最終更新日:2022年2月26日
目次
  • インストール
  • next.config.js
  • package.json
  • 計測する
  • 最後に

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 の方です。


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

最後に

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

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記