Add configuration option to disable inlined CSS in SSR HTML

When inlining CSS, Angular Universal needs to extract critical styles.
This seems to take up a significant chunk of processing time.

However, loading may appear less smooth when this feature is disabled.

Added to the configuration to make it easier to A/B test this without a full re-build.
This commit is contained in:
Yury Bondarenko
2023-02-01 13:10:37 +01:00
parent ca864379c8
commit 38a058d7af
4 changed files with 14 additions and 2 deletions

View File

@@ -116,6 +116,7 @@ export function app() {
server.engine('html', (_, options, callback) => server.engine('html', (_, options, callback) =>
ngExpressEngine({ ngExpressEngine({
bootstrap: ServerAppModule, bootstrap: ServerAppModule,
inlineCriticalCss: environment.universal.inlineCriticalCss,
providers: [ providers: [
{ {
provide: REQUEST, provide: REQUEST,

View File

@@ -4,4 +4,13 @@ export interface UniversalConfig extends Config {
preboot: boolean; preboot: boolean;
async: boolean; async: boolean;
time: boolean; time: boolean;
/**
* Whether to inline "critical" styles into the server-side rendered HTML.
*
* Determining which styles are critical is a relatively expensive operation;
* this option can be disabled to boost server performance at the expense of
* loading smoothness.
*/
inlineCriticalCss?;
} }

View File

@@ -7,6 +7,7 @@ export const environment: Partial<BuildConfig> = {
universal: { universal: {
preboot: true, preboot: true,
async: true, async: true,
time: false time: false,
inlineCriticalCss: true,
} }
}; };

View File

@@ -12,7 +12,8 @@ export const environment: Partial<BuildConfig> = {
universal: { universal: {
preboot: false, preboot: false,
async: true, async: true,
time: false time: false,
inlineCriticalCss: true,
} }
}; };