@@ -332,45 +332,64 @@ export class AngularServerApp {
332
332
return createRedirectResponse ( result . redirectTo , status ) ;
333
333
}
334
334
335
- const { inlineCriticalCssProcessor, criticalCssLRUCache, textDecoder } = this ;
335
+ if ( renderMode === RenderMode . Prerender ) {
336
+ const renderedHtml = await result . content ( ) ;
337
+ const finalHtml = await this . inlineCriticalCss ( renderedHtml , url ) ;
338
+
339
+ return new Response ( finalHtml , responseInit ) ;
340
+ }
336
341
337
342
// Use a stream to send the response before finishing rendering and inling critical CSS, improving performance via header flushing.
338
343
const stream = new ReadableStream ( {
339
- async start ( controller ) {
344
+ start : async ( controller ) => {
340
345
const renderedHtml = await result . content ( ) ;
341
-
342
- if ( ! inlineCriticalCssProcessor ) {
343
- controller . enqueue ( textDecoder . encode ( renderedHtml ) ) ;
344
- controller . close ( ) ;
345
-
346
- return ;
347
- }
348
-
349
- let htmlWithCriticalCss ;
350
- try {
351
- if ( renderMode === RenderMode . Server ) {
352
- const cacheKey = await sha256 ( renderedHtml ) ;
353
- htmlWithCriticalCss = criticalCssLRUCache . get ( cacheKey ) ;
354
- if ( ! htmlWithCriticalCss ) {
355
- htmlWithCriticalCss = await inlineCriticalCssProcessor . process ( renderedHtml ) ;
356
- criticalCssLRUCache . put ( cacheKey , htmlWithCriticalCss ) ;
357
- }
358
- } else {
359
- htmlWithCriticalCss = await inlineCriticalCssProcessor . process ( renderedHtml ) ;
360
- }
361
- } catch ( error ) {
362
- // eslint-disable-next-line no-console
363
- console . error ( `An error occurred while inlining critical CSS for: ${ url } .` , error ) ;
364
- }
365
-
366
- controller . enqueue ( textDecoder . encode ( htmlWithCriticalCss ?? renderedHtml ) ) ;
346
+ const finalHtml = await this . inlineCriticalCss ( renderedHtml , url , true ) ;
347
+ controller . enqueue ( this . textDecoder . encode ( finalHtml ) ) ;
367
348
controller . close ( ) ;
368
349
} ,
369
350
} ) ;
370
351
371
352
return new Response ( stream , responseInit ) ;
372
353
}
373
354
355
+ /**
356
+ * Inlines critical CSS into the given HTML content.
357
+ *
358
+ * @param html - The HTML content to process.
359
+ * @param url - The URL associated with the request, for logging purposes.
360
+ * @param cache - A flag to indicate if the result should be cached.
361
+ * @returns A promise that resolves to the HTML with inlined critical CSS.
362
+ */
363
+ private async inlineCriticalCss ( html : string , url : URL , cache = false ) : Promise < string > {
364
+ const { inlineCriticalCssProcessor, criticalCssLRUCache } = this ;
365
+
366
+ if ( ! inlineCriticalCssProcessor ) {
367
+ return html ;
368
+ }
369
+
370
+ try {
371
+ if ( ! cache ) {
372
+ return await inlineCriticalCssProcessor . process ( html ) ;
373
+ }
374
+
375
+ const cacheKey = await sha256 ( html ) ;
376
+ const cachedHtml = criticalCssLRUCache . get ( cacheKey ) ;
377
+ if ( cachedHtml ) {
378
+ return cachedHtml ;
379
+ }
380
+
381
+ const processedHtml = await inlineCriticalCssProcessor . process ( html ) ;
382
+ criticalCssLRUCache . put ( cacheKey , processedHtml ) ;
383
+
384
+ return processedHtml ;
385
+ } catch ( error ) {
386
+ // eslint-disable-next-line no-console
387
+ console . error ( `An error occurred while inlining critical CSS for: ${ url } .` , error ) ;
388
+
389
+ return html ;
390
+ }
391
+ }
392
+
374
393
/**
375
394
* Constructs the asset path on the server based on the provided HTTP request.
376
395
*
0 commit comments