From 0fe6b3b75b87f6f8050b196615e1c1543b707841 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Tue, 15 Nov 2022 07:50:04 +0000 Subject: [PATCH] perf(@angular-devkit/build-angular): add vendor chunking to server builder With this change we add the `vendorChunk` option in the server builder. This option should only be used in development as it is intended to be used to improve the incremental re-build time. This improves the rebuild time as Webpack will have less modules to analyse during a change in the application. Below, we can see the impact this change has in a `ng new` application. Without vendor chunking ``` $ ng run ssr-vendor:server:development --watch --no-vendor-chunk Build at: 2022-11-14T08:42:27.089Z - Hash: 0325905b63e43ddb - Time: 15357ms Build at: 2022-11-14T08:42:37.565Z - Hash: 05cb180a02524656 - Time: 2498ms Build at: 2022-11-14T08:42:40.325Z - Hash: c5a6996ed1924088 - Time: 1862ms Build at: 2022-11-14T08:42:43.043Z - Hash: 92ce99f38a769c19 - Time: 1516ms ``` With vendor chunking ``` $ ng run ssr-vendor:server:development --watch --vendor-chunk Build at: 2022-11-14T08:43:13.631Z - Hash: 28bdfea879d01a31 - Time: 15561ms Build at: 2022-11-14T08:43:19.396Z - Hash: cc95e2b6cb403111 - Time: 1705ms Build at: 2022-11-14T08:43:21.296Z - Hash: 204138490668a16c - Time: 848ms Build at: 2022-11-14T08:43:23.835Z - Hash: 4fa294b261917944 - Time: 824ms ``` (cherry picked from commit 11bb8ce26f77c5e4cb88a4bd9fffcd6b67ade178) --- .../angular_devkit/build_angular/index.md | 1 + .../src/builders/browser-esbuild/schema.json | 2 +- .../build_angular/src/builders/browser/schema.json | 2 +- .../build_angular/src/builders/server/schema.json | 5 +++++ .../migrations/update-15/update-workspace-config.ts | 6 +++++- .../update-15/update-workspace-config_spec.ts | 13 +++++++++++++ packages/schematics/angular/universal/index.ts | 1 + 7 files changed, 27 insertions(+), 3 deletions(-) diff --git a/goldens/public-api/angular_devkit/build_angular/index.md b/goldens/public-api/angular_devkit/build_angular/index.md index 0a551d617d09..a5e253c337a2 100644 --- a/goldens/public-api/angular_devkit/build_angular/index.md +++ b/goldens/public-api/angular_devkit/build_angular/index.md @@ -269,6 +269,7 @@ export interface ServerBuilderOptions { statsJson?: boolean; stylePreprocessorOptions?: StylePreprocessorOptions_3; tsConfig: string; + vendorChunk?: boolean; verbose?: boolean; watch?: boolean; } diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json index bd78395f3128..0c184a854d5d 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json +++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json @@ -264,7 +264,7 @@ }, "vendorChunk": { "type": "boolean", - "description": "Generate a seperate bundle containing only vendor libraries. This option should only used for development.", + "description": "Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time.", "default": false }, "commonChunk": { diff --git a/packages/angular_devkit/build_angular/src/builders/browser/schema.json b/packages/angular_devkit/build_angular/src/builders/browser/schema.json index c0dc1e719e54..b45065bb7df0 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser/schema.json +++ b/packages/angular_devkit/build_angular/src/builders/browser/schema.json @@ -256,7 +256,7 @@ }, "vendorChunk": { "type": "boolean", - "description": "Generate a seperate bundle containing only vendor libraries. This option should only used for development.", + "description": "Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time.", "default": false }, "commonChunk": { diff --git a/packages/angular_devkit/build_angular/src/builders/server/schema.json b/packages/angular_devkit/build_angular/src/builders/server/schema.json index 196af202b80e..73d6088c1f38 100644 --- a/packages/angular_devkit/build_angular/src/builders/server/schema.json +++ b/packages/angular_devkit/build_angular/src/builders/server/schema.json @@ -116,6 +116,11 @@ "description": "URL where files will be deployed.", "x-deprecated": "Use \"baseHref\" browser builder option, \"APP_BASE_HREF\" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url." }, + "vendorChunk": { + "type": "boolean", + "description": "Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time.", + "default": false + }, "verbose": { "type": "boolean", "description": "Adds more details to output logging.", diff --git a/packages/schematics/angular/migrations/update-15/update-workspace-config.ts b/packages/schematics/angular/migrations/update-15/update-workspace-config.ts index 2b8686e8cf5a..f2d6721846e8 100644 --- a/packages/schematics/angular/migrations/update-15/update-workspace-config.ts +++ b/packages/schematics/angular/migrations/update-15/update-workspace-config.ts @@ -18,8 +18,12 @@ export default function (): Rule { continue; } - for (const [, options] of allTargetOptions(target)) { + for (const [name, options] of allTargetOptions(target)) { delete options.bundleDependencies; + + if (name === 'development') { + options.vendorChunk ??= true; + } } } } diff --git a/packages/schematics/angular/migrations/update-15/update-workspace-config_spec.ts b/packages/schematics/angular/migrations/update-15/update-workspace-config_spec.ts index 553ad9ef4d43..f447f67ac2ad 100644 --- a/packages/schematics/angular/migrations/update-15/update-workspace-config_spec.ts +++ b/packages/schematics/angular/migrations/update-15/update-workspace-config_spec.ts @@ -49,6 +49,9 @@ function createWorkSpaceConfig(tree: UnitTestTree) { bundleDependencies: true, aot: true, }, + development: { + bundleDependencies: true, + }, // eslint-disable-next-line @typescript-eslint/no-explicit-any } as any, }, @@ -83,4 +86,14 @@ describe(`Migration to update 'angular.json'. ${schematicName}`, () => { expect(configurations?.one.bundleDependencies).toBeUndefined(); expect(configurations?.two.bundleDependencies).toBeUndefined(); }); + + it(`should add 'vendorChunk: true' to development configuration`, async () => { + const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise(); + const { options, configurations } = getServerTarget(newTree); + + expect(options.bundleDependencies).toBeUndefined(); + expect(configurations).toBeDefined(); + expect(configurations?.development.vendorChunk).toBeTrue(); + expect(configurations?.one.vendorChunk).toBeUndefined(); + }); }); diff --git a/packages/schematics/angular/universal/index.ts b/packages/schematics/angular/universal/index.ts index 471ca3b61126..a8273e21054f 100644 --- a/packages/schematics/angular/universal/index.ts +++ b/packages/schematics/angular/universal/index.ts @@ -60,6 +60,7 @@ function updateConfigFile(options: UniversalOptions, tsConfigDirectory: Path): R preserveSymlinks: options?.preserveSymlinks, extractLicenses: options?.extractLicenses, inlineStyleLanguage: options?.inlineStyleLanguage, + vendorChunk: options?.vendorChunk, }; };