perf(@angular-devkit/build-angular): add vendor chunking to server bu…

…ilder 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 11bb8ce)
angular · Nov 15, 2022 · 0fe6b3b · 0fe6b3b
1 parent d97d425
commit 0fe6b3b
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -60,6 +60,7 @@ function updateConfigFile(options: UniversalOptions, tsConfigDirectory: Path): R
           preserveSymlinks: options?.preserveSymlinks,
           extractLicenses: options?.extractLicenses,
           inlineStyleLanguage: options?.inlineStyleLanguage,
+          vendorChunk: options?.vendorChunk,
         };
       };