Skip to content

Commit

Permalink
perf(@angular-devkit/build-angular): add vendor chunking to server bu…
Browse files Browse the repository at this point in the history
…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)
  • Loading branch information
alan-agius4 authored and dgp1130 committed Nov 15, 2022
1 parent d97d425 commit 0fe6b3b
Show file tree
Hide file tree
Showing 7 changed files with 27 additions and 3 deletions.
1 change: 1 addition & 0 deletions goldens/public-api/angular_devkit/build_angular/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,7 @@ export interface ServerBuilderOptions {
statsJson?: boolean;
stylePreprocessorOptions?: StylePreprocessorOptions_3;
tsConfig: string;
vendorChunk?: boolean;
verbose?: boolean;
watch?: boolean;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down Expand Up @@ -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();
});
});
1 change: 1 addition & 0 deletions packages/schematics/angular/universal/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ function updateConfigFile(options: UniversalOptions, tsConfigDirectory: Path): R
preserveSymlinks: options?.preserveSymlinks,
extractLicenses: options?.extractLicenses,
inlineStyleLanguage: options?.inlineStyleLanguage,
vendorChunk: options?.vendorChunk,
};
};

Expand Down

0 comments on commit 0fe6b3b

Please sign in to comment.