Next.js app目录页面编译缓慢原因及加速方案咨询

我正在开发一个采用新版App目录结构的Next.js项目，本地开发时编译速度极慢。观测到的编译时长数据如下，API路由和页面路由耗时过长的原因是每个页面加载2000+模块：

• API路由：750ms（2413个模块）
• Stats路由：1312ms（2413个模块）
• 页面编译：3s（4376个模块）
• ID页面：21.5s（4414个模块）
• Recipe路由：2.8s（2426个模块）

终端日志截图：

next.config.js配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
    // dev flags
    // fastRefresh: true,
    // swcMinify: true,
    // concurrentFeatures: true,
    // end dev flags
    reactStrictMode: false, // 关闭严格模式
    async redirects() {
        return [
            {
                source: "/",
                destination: "/dashboard",
                permanent: true, // 301 (永久) 或 302 (临时) 重定向
            },
        ];
    },
    experimental: {
        // appDir: true,
        instrumentationHook: true,
        serverComponentsExternalPackages: ["mongoose"],
    },
    // images: {
    //  domains: ["lh3.googleusercontent.com"],
    // },
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "**",
            },
        ],
    },
    webpack(config) {
        config.experiments = {
            ...config.experiments,
            topLevelAwait: true,
        };
        config.module.rules.push({
            test: /\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: [['next/babel', {'preset-env': {modules: 'commonjs'}}]],
                        plugins: ['babel-plugin-module-resolver']
                    }
                }
            ]
        });
        return config;
    },
    env: {
        NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    },
};

module.exports = nextConfig;

package.json配置 #

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --port 8080",
    "build": "next build",
    "start": "next start --port 8080",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.425.0",
    "@aws-sdk/client-sqs": "^3.427.0",
    "@aws-sdk/s3-request-presigner": "^3.472.0",
    "@kurkle/color": "^0.3.2",
    "@nextui-org/react": "^2.2.0",
    "@react-stately/data": "^3.10.3",
    "@reduxjs/toolkit": "^1.9.6",
    "autoprefixer": "10.4.15",
    "aws-crt": "^1.18.0",
    "aws-sdk": "^2.1547.0",
    "babel-loader": "^9.1.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "bcrypt": "^5.1.1",
    "chart.js": "^4.4.0",
    "chart.piecelabel.js": "^0.15.0",
    "chartjs-adapter-luxon": "^1.3.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "cheerio": "^1.0.0-rc.12",
    "crypto-js": "^4.2.0",
    "csv-parse": "^5.5.3",
    "dotenv": "^16.3.1",
    "eslint-config-next": "^13.5.4",
    "framer-motion": "^10.16.4",
    "luxon": "^3.4.3",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.44",
    "mongodb": "^6.0.0",
    "mongoose": "^8.0.1",
    "next": "^13.5.4",
    "next-auth": "^4.23.1",
    "next-themes": "^0.2.1",
    "nodemailer": "^6.9.7",
    "postcss": "8.4.29",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-color": "^2.19.3",
    "react-dom": "^18.2.0",
    "react-google-recaptcha": "^3.1.0",
    "react-hook-form": "^7.47.0",
    "react-icons": "^4.11.0",
    "react-redux": "^8.1.3",
    "react-stars": "^2.2.5",
    "reactflow": "^11.9.2",
    "recharts": "^2.10.3",
    "tailwind-merge": "^1.14.0",
    "tailwind-scrollbar": "^3.0.5",
    "tailwindcss": "3.3.3"
  }
}

内容的提问来源于stack exchange，提问作者Swapnil Kotkar