[HOLD, Pre6] Blazor static asset delivery and fingerprinting (#33010)

dotnet · Jul 9, 2024 · 6534547 · 6534547
1 parent ca67720
commit 6534547
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 43 deletions.
diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md
@@ -173,10 +173,30 @@ Add a page to the app that uses the `ExtraStyles` component from the RCL.
 <ExtraStyles />
 ```
 
-Link to the library's stylesheet in the app's `<head>` markup ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)).
+Link to the library's stylesheet in the app's `<head>` markup ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)):
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-9.0"
+
+Blazor Web Apps:
+
+```html
+<link href="@Assets["_content/ComponentLibrary/additionalStyles.css"]" rel="stylesheet">
+```
+
+Standalone Blazor WebAssembly apps:
+
+```html
+<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-6.0 < aspnetcore-9.0"
 
 ```html
-<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />
+<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">
 ```
 
 :::moniker-end

diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md
@@ -51,12 +51,34 @@ h1 {
 
 ## CSS isolation bundling
 
-CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `<head>` tag ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `<link>` element is added by default to an app created from the Blazor project templates, where the placeholder `{ASSEMBLY NAME}` is the project's assembly name:
+CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `<head>` tag ([location of `<head>` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `<link>` element is added by default to an app created from the Blazor project templates:
+
+:::moniker range=">= aspnetcore-9.0"
+
+Blazor Web Apps:
+
+```html
+<link href="@Assets["{ASSEMBLY NAME}.styles.css"]" rel="stylesheet">
+```
+
+Standalone Blazor WebAssembly apps:
+
+```html
+<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
+```
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-9.0"
 
 ```html
 <link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
 ```
 
+:::moniker-end
+
+The `{ASSEMBLY NAME}` placeholder is the project's assembly name.
+
 :::moniker range="< aspnetcore-8.0"
 
 The following example is from a hosted Blazor WebAssembly **:::no-loc text="Client":::** app. The app's assembly name is `BlazorSample.Client`, and the `<link>` is added by the Blazor WebAssembly project template when the project is created with the Hosted option (`-ho|--hosted` option using the .NET CLI or **ASP.NET Core Hosted** checkbox using Visual Studio):
@@ -90,7 +112,7 @@ At build time, a project bundle is created with the convention `obj/{CONFIGURATI
 
 ## Child component support
 
-By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the placeholder `{COMPONENT NAME}` is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier. 
+By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier. 
 
 The following example shows a parent component called `Parent` with a child component called `Child`.
 

diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md
@@ -92,6 +92,8 @@ Add an `App` component to the app, which serves as the root component, which is
 
 `Components/App.razor`:
 
+:::moniker range=">= aspnetcore-9.0"
+
 ```razor
 <!DOCTYPE html>
 <html lang="en">
@@ -100,7 +102,7 @@ Add an `App` component to the app, which serves as the root component, which is
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link rel="stylesheet" href="BlazorSample.styles.css" />
+    <link rel="stylesheet" href="@Assets["{ASSEMBLY NAME}.styles.css"]" />
     <HeadOutlet />
 </head>
 
@@ -112,12 +114,34 @@ Add an `App` component to the app, which serves as the root component, which is
 </html>
 ```
 
-For the `<link>` element in the preceding example, change `BlazorSample` in the stylesheet's file name to match the app's project name. For example, a project named `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name:
+:::moniker-end
 
-```html
-<link rel="stylesheet" href="ContosoApp.styles.css" />
+:::moniker range="< aspnetcore-9.0"
+
+```razor
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <link rel="stylesheet" href="{ASSEMBLY NAME}.styles.css" />
+    <HeadOutlet />
+</head>
+
+<body>
+    <Routes />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
 ```
 
+:::moniker-end
+
+The `{ASSEMBLY NAME}` placeholder is the app's assembly name. For example, a project with an assembly name of `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name.
+
 Add a `Pages` folder to the `Components` folder to hold routable Razor components.
 
 Add the following `Welcome` component to demonstrate static SSR.
@@ -739,16 +763,18 @@ Add an `App` component to the `Components` folder with the following content.
 
 `Components/App.razor`:
 
+:::moniker range=">= aspnetcore-9.0"
+
 ```razor
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{APP TITLE}</title>
-    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="/css/site.css" />
-    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
+    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
+    <link rel="stylesheet" href="@Assets["css/site.css"]" />
+    <link rel="stylesheet" href="@Assets["{APP NAMESPACE}.styles.css"]" />
     <HeadOutlet />
 </head>
 <body>
@@ -761,19 +787,41 @@ Add an `App` component to the `Components` folder with the following content.
 </html>
 ```
 
-In the preceding code update the app title and stylesheet file name:
+:::moniker-end
 
-* For the `{APP TITLE}` placeholder in the `<title>` element, set the app's title. For example:
+:::moniker range="< aspnetcore-9.0"
 
-  ```html
-  <title>Blazor Sample</title>
-  ```
+```razor
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{APP TITLE}</title>
+    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/site.css" />
+    <link rel="stylesheet" href="{APP NAMESPACE}.styles.css" />
+    <HeadOutlet />
+</head>
+<body>
+    <Routes />
+    <script src="/lib/jquery/dist/jquery.min.js"></script>
+    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/site.js"></script>
+    <script src="_framework/blazor.web.js"></script>
+</body>
+</html>
+```
 
-* For the `{APP NAMESPACE}` placeholder in the stylesheet `<link>` element, set the app's namespace. For example:
+:::moniker-end
 
-  ```html
-  <link rel="stylesheet" href="/BlazorSample.styles.css" />
-  ```
+The `{APP NAMESPACE}` placeholder is the app's namespace.
+
+The `{APP TITLE}` placeholder in the `<title>` element is the app's title. For example:
+
+```html
+<title>Blazor Sample</title>
+```
 
 Where services are registered, add services for Razor components and services to support rendering Interactive Server components.
 

diff --git a/aspnetcore/blazor/fundamentals/environments.md b/aspnetcore/blazor/fundamentals/environments.md
@@ -128,7 +128,7 @@ For more information on Blazor startup, see <xref:blazor/fundamentals/startup>.
 
 Blazor WebAssembly apps can set the environment with the `blazor-environment` header.
 
-In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the placeholder `{TARGET FRAMEWORK}` is the target framework:
+In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the `{TARGET FRAMEWORK}` placeholder is the target framework:
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>