Next.js に @next/bundle-analyzer を導入し、バンドルサイズを確認する方法

 2021/05/21
Next.js に @next/bundle-analyzer を導入し、バンドルサイズを確認する方法

はじめに

どーも、入田 / ぐるたか @guru_taka です!
fwywd のブログページのパフォーマンスを上げるため、容量の大きいモジュールの把握すべく、@next/bundle-analyzer でバンドルサイズを可視化しました。
本記事では @next/bundle-analyzer の導入方法と使い方を紹介します!

@next/bundle-analyzer とは?

@next/bundle-analyzer とは、 webpack-bundle-analyzer を Next.js に拡張した公式プラグインです。
下図のように、バンドルサイズを可視化でき、容量の大きいモジュールが直感的に確認できます!
next-bundle-analyzer

@next/bundle-analyzer の導入方法

以下コマンドを実行し、@next/bundle-analyzer をインストールします。
yarn add -D @next/bundle-analyzer
続いて next.config.js に以下のコードを記述します。
// next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); module.exports = withBundleAnalyzer({});
後は、以下コマンドを実行するだけです!
ANALYZE=true yarn build
各バンドルの情報が確認できるようになります。
next-bundle-analyzer

最後に

以上になります。バンドルサイズがひと目で確認できて、非常に便利です!
また ANALYZE=true yarn build は頻繁に使うコマンドなので、package.json に登録しておくと捗ります!
// package.json "scripts": { "analyze-bundle": "ANALYZE=true next build" },
yarn analyze-bundle
今後もさまざまな技術情報をお届けしますので、楽しみにお待ちいただけたら嬉しいです!

参考文献

\ 次期受講生募集中 /

経営から技術まですべての力を手に入れたいあなたへ

【次期受講生募集】経営から技術まで仲間と一緒にすべての力を手に入れたいあなたへ

『起業家精神 × 学び方改革』が起こす行動の劇的な変化!
キカガク創業者の吉崎が考える新しい起業家育成の環境。
スキルばかり磨いて変わらない現実を変えていきましょう!