Next.jsアプリバンドルを分析する方法

Next.jsアプリバンドルの内容の詳細

次に、生成されたコードバンドルを分析する方法を提供します。

アプリのpackage.jsonファイルを開き、スクリプトセクションに次の3つの新しいコマンドを追加します。

"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"

このような：

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

次に、これら2つのパッケージをインストールします。

npm install --dev cross-env @next/bundle-analyzer

作成するnext.config.jsプロジェクトルートのファイル、次の内容：

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

module.exports = withBundleAnalyzer({})

コマンドを実行します

npm run analyze

これにより、ブラウザで2ページが開きます。 1つはクライアントバンドル用、もう1つはサーバーバンドル用です。

これは非常に便利です。バンドル内で最も多くのスペースを使用しているものを検査できます。また、サイドバーを使用してバンドルを除外し、小さいバンドルを簡単に視覚化することもできます。

私の無料ダウンロードNext.jsハンドブック


その他の次のチュートリアル：


Tech Wiki Online！