Angular 19项目中ng serve构建缓慢的优化咨询

针对你项目的配置和使用场景，以下是具体的构建速度优化方案：

1. 调整开发模式的AOT配置 #

开发模式下默认启用的AOT虽然模板检查更严格，但初始构建耗时会更高。可以尝试关闭AOT换取更快的初始构建速度：
修改angular.json中development配置：

"development": {
  "optimization": false,
  "extractLicenses": false,
  "aot": false, // 改为false
  "sourceMap": true,
  // 其余配置保持不变
}

如果需要保留模板严格检查，可以跳过此步骤，优先尝试其他优化。

2. 启用TypeScript增量编译 #

在tsconfig.json的compilerOptions中添加增量编译配置，缓存编译结果，大幅减少后续构建时间：

"compilerOptions": {
  // 现有配置
  "incremental": true,
  "tsBuildInfoFile": "./dist/.tsbuildinfo" // 指定缓存文件路径
}

3. 缩小资源处理范围 #

当前assets配置使用**/*会遍历所有子目录和文件，若目录文件数量多会增加构建耗时。修改为只匹配需要的文件类型：

"assets": [
  {
    "glob": "*.{png,jpg,svg,json}", // 仅匹配指定类型文件
    "input": "public"
  },
  {
    "glob": "**/*.{png,jpg,svg,json}", // 根据实际需求调整
    "input": "src/assets",
    "output": "assets"
  }
]

4. 关闭开发阶段的严格模板检查 #

strictTemplates会增加模板编译时间，开发阶段可暂时关闭，上线前再开启：
修改tsconfig.json的angularCompilerOptions：

"angularCompilerOptions": {
  // 现有配置
  "strictTemplates": false
}

5. 禁用Serve时的自动Lint检查 #

每次ng serve自动执行lint会额外增加耗时，在angular.json的serve配置中禁用：

"serve": {
  "builder": "@angular/build:dev-server",
  "options": {
    "lint": false // 添加此行
  },
  // 现有配置
}

代码规范检查可单独执行ng lint。

6. 优化第三方库引入 #

• FontAwesome：替换全量引入为按需导入，使用@fortawesome/angular-fontawesome只引入项目用到的图标，移除@fortawesome/fontawesome-free/css/all.min.css的全局引入。
• Transloco：确保翻译文件按需加载，检查配置文件，避免构建时打包所有翻译资源。

7. 启用热模块替换（HMR） #

HMR仅重新加载修改的模块，大幅提升开发时的更新速度：
执行命令时添加参数：

ng serve --hmr

或在angular.json中默认启用：

"serve": {
  "builder": "@angular/build:dev-server",
  "options": {
    "hmr": true,
    "hmrWarning": false // 可选，关闭HMR提示
  },
  // 现有配置
}

8. 清理并优化CLI缓存 #

旧缓存可能存在异常，先清理再重新构建：

ng cache clean

也可指定缓存目录避免冲突：

ng serve --cache-path .angular/cache

9. 环境与工具优化 #

• 升级Node.js到20.x或更高稳定版本（Angular 19官方推荐），新版本性能提升明显。
• 使用pnpm替代npm/yarn，其包管理和缓存机制更高效，减少IO耗时。
• 为Node.js分配更多内存：设置环境变量NODE_OPTIONS="--max-old-space-size=8192"（分配8GB内存）。

10. 清理冗余代码与依赖 #

• 检查main.ts或全局导入，将大库延迟到懒加载模块中引入。
• 删除项目中未使用的组件、模块和依赖，减少构建处理的文件数量。

内容的提问来源于stack exchange，提问作者user p