标签：src slow false v13 serve Angular true angular
最近在升级公司的Angular项目，项目使用Angular-Cli搭建，UI使用Angular Metarial库和懒加载路由，Angular版本由v10升级到v13。
升级指导：https://update.angular.io/
问题：升级之后ng serve编译非常慢
仅仅启动都要用到90s+
开发过程中的重构时间也变长了，任何一个小的改动，哪怕仅仅是文字或者样式的改动都要重新编译，并且耗时10s+到40s不等
一顿操作猛如虎，一看战绩零杠五，这样肯定不行嘚，会大大降低开发的效率。谷歌一下才发现，确实有很多“升级到Angular12之后，ng serve 编译缓慢”之类的问题，大概能确认不是我单独项目的问题，嗯，下面就是寻找解决办法啦。
原因：
在Angular 12版本中，运行ng build，现在默认为生产模式。这是一个受欢迎的变化，因为这样可以减少不小心将一个开发构建部署到生产环境中的机会，后者要慢得多，规模也大得多，会让人觉得Angular很慢。这也与其他为生产而构建的web框架一致。
Angular服务于应用的方式，本质上是用监视模式进行构建。正如前面提到的，在默认情况下，在启用生产优化的情况下进行构建。这会增加构建过程的时间。
解决办法
有一个迁移来添加“development”构建配置。
要手动修复这个问题，您需要将开发选项添加为默认值，并将serve中target的defaultConfiguration设置为development。
示例：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngv12": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ngv12",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
+ "development": {
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "buildOptimizer": false,
+ "sourceMap": true,
+ "optimization": false,
+ "namedChunks": true
+ },
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
},
+ "defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
+ "defaultConfiguration": "",
"options": {
+ "browserTarget": "ngv12:build:development"
},
"configurations": {
"production": {
"browserTarget": "ngv12:build:production"
}
}
}
}
}
},
"defaultProject": "ngv12"
}
效果：
再次运行可见速度快了很多，启动项目60s，重构时间也均未超过10s
参考资料
Speeding up the development serve after upgrading to Angular v12
标签：src,slow,false,v13,serve,Angular,true,angular 来源： https://blog.csdn.net/a1056244734/article/details/122785322
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。