Angular 15项目ng serve构建及热更新速度极慢的问题求助

大家好，我目前在维护一个Angular 15的中大型项目，最近遇到了一个头疼的问题——ng serve的启动构建和热更新速度慢到完全影响开发效率了，实在找不到原因，来这里求助！

先给大家说下具体的卡顿情况：

• 首次启动ng serve的构建耗时：150153ms（约2分30秒）

  Build at: 2025-07-23T12:23:56.259Z - Hash: 5ba2b19880727f6c - Time: 150153ms

• 哪怕只是做了加一行console.log这种极小的代码改动，热更新的构建耗时都要60598ms（约1分钟）

  Build at: 2025-07-23T12:28:27.654Z - Hash: be9deeddc53e7be5 - Time: 60598ms

再说下项目的基本情况：

• 项目还在使用NgModule，大概有150个左右
• 构建工具用的是@angular-builders/custom-webpack的browser和dev-server

下面是我项目里angular.json中build和serve的核心配置：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    },
    "sourceMap": true,
    "optimization": true,
    "statsJson": true,
    "outputPath": "dist/fuse",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": [ "zone.js" ],
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "allowedCommonJsDependencies": [
      "apexcharts",
      "highlight.js",
      "crypto-js/enc-utf8",
      "crypto-js/hmac-sha256",
      "crypto-js/enc-base64",
      "flat",
      "quill",
      "lodash",
      "moment",
      "pdfmake/build/pdfmake",
      "pdfmake/build/vfs_fonts",
      "html-to-pdfmake",
      "jquery",
      "quill-image-resize-module-ts"
    ],
    "assets": [
      "src/favicon-16x16.png",
      "src/favicon-32x32.png",
      "src/web.config",
      "src/assets",
      {
        "glob": "_redirects",
        "input": "src",
        "output": "/"
      }
    ],
    "stylePreprocessorOptions": {
      "includePaths": [ "src/@fuse/styles" ]
    },
    "styles": [
      "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
      "node_modules/angular-calendar/css/angular-calendar.css",
      "node_modules/flatpickr/dist/flatpickr.css",
      "node_modules/slick-carousel/slick/slick.css",
      "node_modules/slick-carousel/slick/slick-theme.css",
      "src/@fuse/styles/tailwind.scss",
      "src/@fuse/styles/themes.scss",
      "src/styles/vendors.scss",
      "src/@fuse/styles/main.scss",
      "src/styles/styles.scss",
      "src/styles/tailwind.scss"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/slick-carousel/slick/slick.min.js"
    ]
  },
  "configurations": {
    "production": {
      "customWebpackConfig": {
        "path": "webpack.config.js"
      },
      "outputPath": "dist/production",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "3mb",
          "maximumError": "10mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "75kb",
          "maximumError": "90kb"
        }
      ],
      "outputHashing": "all",
      "sourceMap": false
    },
    "staging": {
      "outputPath": "dist/staging",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ],
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "3mb",
          "maximumError": "10mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "75kb",
          "maximumError": "90kb"
        }
      ],
      "outputHashing": "all",
      "sourceMap": false
    },
    "development": {
      "buildOptimizer": true,
      "optimization": true,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "fuse:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "fuse:build:production"
    },
    "development": {
      "browserTarget": "fuse:build:development",
      "hmr": true
    }
  },
  "defaultConfiguration": "development"
},
"extract-i18n": {
  "builder": "@angular-devkit/build-angular:extract-i18n",
  "options": {
    "browserTarget": "fuse:build"
  }
}

另外我的tailwind.config.js开头是这样的：

const path = require("path");
const colors = require("tailwi

我现在怀疑是不是NgModule数量太多导致的？或者是angular.json里的配置有什么不合理的地方？比如开发环境下开了optimization: true会不会拖慢速度？希望有经验的朋友能帮我分析下问题出在哪，或者给点优化的建议，谢谢大家！

内容来源于stack exchange