Angular启动慢怎么办？这几个优化方法真管用

最近在公司做后台管理系统，用的是 Angular 框架。每次改完代码保存，等它重新加载就得十几秒，喝口水的功夫项目才跑起来。旁边同事早就看到效果了，我还在等控制台输出日志。这体验太折磨人了，干脆花两天时间好好查原因、动手优化，还真找到了几个见效快的办法。

先看看是不是开了 DevTools 扩展

很多人没注意，浏览器装了 Angular DevTools 插件后，有时候会拖慢本地开发环境的启动速度。尤其是项目一多，插件自动连接多个实例，卡得更明显。可以先关掉插件试试，或者只在需要调试时再打开。

检查是否启用了 sourceMap

开发环境下默认生成 sourceMap 是为了方便调试，但文件一大，打包过程就会变慢。如果你不是每分钟都在查堆栈错误，可以把 sourceMap 临时关掉。

修改 angular.json 文件里的配置：

"configurations": {
  "development": {
    "sourceMap": {
      "scripts": false,
      "styles": false
    }
  }
}

用 Ahead-of-Time (AOT) 编译

AOT 其实是 Angular 默认推荐的方式，但在某些老项目里可能被手动关掉了。开启 AOT 能让模板编译提前完成，而不是等到浏览器运行时再去解析，启动自然就快了。

确保 tsconfig.app.json 里有这行：

{
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

懒加载模块拆分清楚

有个项目一开始把所有功能都塞进主模块，首页一加载就把十几个页面的代码全拉下来，启动当然慢。后来我把各个功能模块改成懒加载，路由里加上 loadChildren，首页体积立马小了一半。

const routes: Routes = [
  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) },
  { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }
];

升级到最新版 CLI

之前用的是 Angular 12，后来升级到 16，发现 ng serve 启动速度提升挺明显的。新版本对构建流程做了不少底层优化，比如增量构建更聪明了，改一行代码不用全量重编译。升级命令很简单：

ng update @angular/core @angular/cli

考虑换用 Vite 作为开发服务器

Angular 17 开始支持用 Vite 替代 Webpack 做开发服务器，冷启动速度快很多。如果你的项目允许尝试新特性，可以试一下 ng add @angular-devkit/build-vite，加完之后用 ng serve 就能感受到区别。

别忘了清理无用依赖

有次排查发现项目里还留着三年前用过的 UI 库，虽然没引用，但依然被打包进去。用 npm ls 或 depcheck 工具扫一遍，删掉那些“僵尸依赖”，构建速度也能提一截。

这些方法一个个试过来，我的本地启动时间从 15 秒压到了 5 秒内。不追求一步到位，哪个见效快就先上哪个。实际项目中往往是组合拳才能出效果。