升级到 Angular v12 后开发服务速度加快

从旧版本 Angular 升级到 Angular v12 后，您可能会注意到开发ng serve时间有所增加，同时还会出现 SourceMap 缺失的情况，并且重建时间也会更长。本文将帮助您设置开发环境的默认配置，以使您的应用程序能够像以前一样运行。

在 Angular 12 版本中，运行ng build现在默认为生产模式。这是一个受欢迎的变化，因为它减少了意外将开发构建部署到生产环境的可能性。生产环境速度慢得多，体积也大得多，让人觉得 Angular 很慢。这也与其他开箱即用的、为生产环境构建的 Web 框架保持一致。

Angular 服务应用程序的方式本质上是通过监视模式进行构建。如前所述，现在默认启用生产优化后进行构建。这会增加构建过程的时间。

有一个迁移来添加“开发”构建配置。

要运行此迁移，请运行：

ng update @angular/cli --migrate-only update-angular-config-v12

需要注意的是，它仅支持迁移第一方 Angular 构建器以用于开发模式，包括：

要手动修复此问题，请将开发选项添加为默认值，并将其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"
	}

	{
	"$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"
	}

现在，运行时ng serve您将获得开发版本，这对于本地开发来说速度更快。

如果你喜欢这个，请点击❤️，让其他人也看到。在 Twitter 上关注我，了解更多关于 Angular、Nx和NgRx 的技巧！

参见