Angular Universal：关键CSS加载与非关键CSS延迟实现问询

Hey Phil, let's tackle your Angular Universal optimization questions step by step—these are super common hurdles when trying to fix Lighthouse performance issues, so I’ve got some actionable tips for you:

1. Loading critical.scss in <head> without inline code #

If you want to avoid inline critical CSS but still load it early in <head>, here’s a solid approach:

• First, compile your critical.scss into a standalone critical.css file. Update your angular.json (formerly angular-cli.json) under architect/build/options/styles to include both critical.scss and styles.scss as separate entries.
• Next, add a preload link in your index.html <head> to prioritize loading critical.css without blocking rendering, then switch it to a standard stylesheet once loaded:

  <link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="critical.css"></noscript>
  

This ensures the browser fetches critical styles quickly, and falls back to a regular stylesheet for users with JavaScript disabled.

2. Better alternatives to the critical package or manual inline #

The critical package works but can be finicky with Angular’s component-scoped styles. Here are two more reliable, pipeline-integrated options:

• Angular CLI + Custom Webpack Config: Use mini-css-extract-plugin in a custom webpack setup to split critical styles from your main bundle. Configure your build to output critical.css as a separate chunk, keeping your workflow tied to Angular CLI instead of external tools.
• Component-Level Critical Styles: If your critical styles are tied to above-the-fold components, use Angular’s styleUrls for those components to load their styles first. Combine this with preload links for component stylesheets, and delay global styles.scss until later. This eliminates the need to maintain a separate critical.scss file entirely.

3. Delaying styles.scss until pre-rendered content loads #

To prevent your main stylesheet from blocking initial render of pre-rendered Universal content, load it dynamically after the page is interactive:

• Dynamic Injection in Root Component: In your AppComponent, add code to inject the main stylesheet once the component initializes (ensuring pre-rendered content is visible):

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    ngOnInit(): void {
      const mainStyleLink = document.createElement('link');
      mainStyleLink.rel = 'stylesheet';
      mainStyleLink.href = 'styles.css';
      document.head.appendChild(mainStyleLink);
    }
  }
  

• Non-Blocking Media Hack: Alternatively, add the main stylesheet to index.html with a non-blocking media attribute, then switch it to apply to all media once loaded:

  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
  

This tells the browser to fetch the stylesheet without pausing rendering, then apply it once ready.

4. Troubleshooting angular-cli.json (now angular.json) server-app config #

Since you mentioned issues with the server-app setup, here’s what to check for Angular Universal pre-rendering:

• Ensure your server target in angular.json points to the correct server-side module (usually server.ts).
• If splitting critical CSS, make sure your server build includes the same style processing as your client build. You may need a custom webpack config for the server target to handle CSS extraction correctly (server-side rendering doesn’t process styles the same way as client-side).
• Verify your pre-render script generates HTML that includes the preloaded critical.css link—sometimes server-side renders fail to inject client-side assets correctly, so manually adding the link to index.html can fix this.

Hope these solutions help you knock out those Lighthouse performance warnings!

内容的提问来源于stack exchange，提问作者Phil