Angular项目开发环境下编译时间长的问题

最新推荐文章于 2026-04-21 12:42:23 发布

原创最新推荐文章于 2026-04-21 12:42:23 发布 · 2.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

Angular 专栏收录该内容

4 篇文章

订阅专栏

Angular项目在添加组件后编译速度变慢，经过分析发现是版本更新导致的配置问题。编译时间延长可能是因为Angular版本升级后，未正确配置angular.json文件或未运行ng update命令，使得项目处于生产环境配置。解决方法包括手动修改angular.json文件或使用ng update命令进行版本迁移。

这个问题来自于我的个人博客项目。

解决方法来自StackOverflow: Angular 12 'ng serve' builds apps slowly, almost like production builds

事情是这样的：

我的Angular项目编译运行是正常的, 在模板和代码中如果作了更改, 只要保存就会在1秒内编译并重新完成部署. 但在我添加基于jquery的markdown渲染组件时, 突然出现了奇葩的错误, 无法将组件添加到项目中. 于是我将整个npm_modules文件夹删掉, 并重新运行npm install. 最后组件成功添加了, 但却遗留下了一个问题: 从此编译速度变慢了百倍. 文件保存后往往要运行好几十秒才能重新编译部署到浏览器中, 大大降低了我的开发效率.

但当时为了趁早完成我的第一个博客项目, 就没有管那么多, 头铁地完成了. 最近学校要交数据库实践项目, 我就想把该项目加强并完善后, 应付上去.

这次我决定先把这个问题解决了.

问题缘由

在Google上搜了大多资料后, 所有苗头都指向了一个问题: 版本更新.

如果你的Angular项目版本是v11, 然后运行了npm install, 那么极有可能会给你安装v12版本的依赖包. 而v12版本的cli对angular.json文件的理解方式与v11的不一样. 若升级后不对angular.json文件进行一定的配置, 或运行ng update命令. 那么就会导致 ng server 运行处于生产环境的相关配置中.

处于这种配置的时候, 打包方式就从JIT变成了AOT, 时间大大增长.

(其实这几段话有我个人的理解, 如果大佬您觉得有不对的地方, 还请指出)

问题判断

为了判断是否符合我的描述, 你可以试着修改你的ng项目中的模板或代码, 比如加个空格再保存, 查看生成的main.js大小. 如下图, 图1 704kb的就是有问题的, 图2 36kb的是没问题的.

解决办法

方法一: 修改angular.json文件

projects.你的项目名.architect.build.configurations 中添加development项目如下:

"development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true
}

projects.你的项目名.architect.serve.configurations 中添加项目如下

"development": {
                            "browserTarget": "你的项目名:build:development"
                       }

projects.你的项目名.architect.serve 中添加defaultConfiguration项目如下
```
"defaultConfiguration": "development"
```

接下来运行ng serve就是飞速的编译速度

方法二: 运行通过ng命令进行版本迁移

根据StackOverFlow大佬的描述和我的一些理解: 对于一个angular项目而言, 对于小版本的更迭,是可以通过npm直接update的. 可以先执行 ng update 命令:

PS D:\\MyProjects\\myblog\\myblog-client> ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 31 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       12.0.2 -> 12.1.1         ng update @angular/cli
      @angular/core                      12.0.2 -> 12.1.1         ng update @angular/core
      ng-zorro-antd                      11.4.1 -> 11.4.2         ng update ng-zorro-antd

    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.

如果检测到是大更新, ng update命令就会直接进行. 但如果出现了如上图的There might be additional... 那么说明更新是小更新, 直接走npm即可.

但如果是大更新, 但却通过npm进行, 那么极有可能出现我的这种情况. 下面就是我这种情况的解决方法(命令):

ng update @angular/cli --migrate-only --from 11 --to 12 --allow-dirty

这样也可以解决问题.