Skip to content

Commit b0436fe

Browse files
guardrexguardrex
authored
Update Blazor release notes (#36630)
1 parent 36c9dc5 commit b0436fe

2 files changed

Lines changed: 59 additions & 13 deletions

File tree

‎aspnetcore/blazor/fundamentals/static-files.md‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ In releases prior to .NET 8, Blazor framework static files, such as the Blazor s
232232

233233
## Fingerprint client-side static assets in standalone Blazor WebAssembly apps
234234

235-
In standalone Blazor WebAssembly apps during build/publish, the framework overrides placeholders in `index.html` with values computed during build to fingerprint static assets for client-side rendering. A [fingerprint](https://wikipedia.org/wiki/Fingerprint_(computing)) is placed into the `blazor.webassembly.js` script file name, and an import map is generated for other .NET assets.
235+
In standalone Blazor WebAssembly apps during build and publish, the framework overrides placeholders in `index.html` with values computed during build to fingerprint static assets for client-side rendering. A [fingerprint](https://wikipedia.org/wiki/Fingerprint_(computing)) is placed into the `blazor.webassembly.js` script file name, and an import map is generated for other .NET assets.
236236

237237
The following configuration must be present in the `wwwwoot/index.html` file of a standalone Blazor WebAssembly app to adopt fingerprinting:
238238

@@ -262,12 +262,25 @@ In the project file (`.csproj`), the `<OverrideHtmlAssetPlaceholders>` property
262262

263263
When resolving imports for JavaScript interop, the import map is used by the browser resolve fingerprinted files.
264264

265-
Any script in `index.html` with the fingerprint marker is fingerprinted by the framework. For example, a script file named `scripts.js` in the app's `wwwroot/js` folder is fingerprinted by adding `#[.{fingerprint}]` before the file extension (`.js`):
265+
In the following example, all developer-supplied JS files are modules with a `.js` file extension.
266+
267+
A module named `scripts.js` in the app's `wwwroot/js` folder is fingerprinted by adding `#[.{fingerprint}]` before the file extension (`.js`):
266268

267269
```html
268-
<script src="js/scripts#[.{fingerprint}].js"></script>
270+
<script type="module" src="js/scripts#[.{fingerprint}].js"></script>
269271
```
270272

273+
Specify the fingerprint expression with the `<StaticWebAssetFingerprintPattern>` property in the app's project file (`.csproj`):
274+
275+
```xml
276+
<ItemGroup>
277+
<StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.js"
278+
Expression="#[.{fingerprint}]!" />
279+
</ItemGroup>
280+
```
281+
282+
Any JS file (`*.js`) in `index.html` with the fingerprint marker is fingerprinted by the framework, including when the app is published.
283+
271284
## Fingerprint client-side static assets in Blazor Web Apps
272285

273286
For client-side rendering (CSR) in Blazor Web Apps (Interactive Auto or Interactive WebAssembly render modes), static asset server-side [fingerprinting](https://wikipedia.org/wiki/Fingerprint_(computing)) is enabled by adopting [Map Static Assets routing endpoint conventions (`MapStaticAssets`)](xref:fundamentals/static-files), [`ImportMap` component](xref:blazor/fundamentals/static-files#importmap-component), and the <xref:Microsoft.AspNetCore.Components.ComponentBase.Assets?displayProperty=nameWithType> property (`@Assets["..."]`). For more information, see <xref:fundamentals/static-files>.

‎aspnetcore/release-notes/aspnetcore-10/includes/blazor.md‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,9 @@ For more information, see [`HttpClient` and `HttpRequestMessage` with Fetch API
139139

140140
### Client-side fingerprinting
141141

142-
The release of .NET 9 introduced [server-side fingerprinting](https://en.wikipedia.org/wiki/Fingerprint_(computing)) of static assets in Blazor Web Apps with the introduction of [Map Static Assets routing endpoint conventions (`MapStaticAssets`)](xref:fundamentals/static-files), the [`ImportMap` component](xref:blazor/fundamentals/static-files#importmap-component), and the <xref:Microsoft.AspNetCore.Components.ComponentBase.Assets?displayProperty=nameWithType> property (`@Assets["..."]`) to resolve fingerprinted JavaScript modules. For .NET 10, you can opt-into client-side fingerprinting of JavaScript modules for standalone Blazor WebAssembly apps.
142+
The release of .NET 9 introduced [server-side fingerprinting](https://en.wikipedia.org/wiki/Fingerprint_(computing)) of static assets in Blazor Web Apps with the introduction of [Map Static Assets routing endpoint conventions (`MapStaticAssets`)](xref:fundamentals/static-files), the [`ImportMap` component](xref:blazor/fundamentals/static-files#importmap-component), and the <xref:Microsoft.AspNetCore.Components.ComponentBase.Assets?displayProperty=nameWithType> property (`@Assets["..."]`) to resolve fingerprinted JavaScript (JS) modules. For .NET 10, you can opt-into client-side fingerprinting of JS modules for standalone Blazor WebAssembly apps.
143143

144-
In standalone Blazor WebAssembly apps during build/publish, the framework overrides placeholders in `index.html` with values computed during build to fingerprint static assets. A fingerprint is placed into the `blazor.webassembly.js` script file name.
144+
In standalone Blazor WebAssembly apps during build and publish, the framework overrides placeholders in `index.html` with values computed during build to fingerprint static assets. A fingerprint is placed into the `blazor.webassembly.js` script file name.
145145

146146
The following markup must be present in the `wwwroot/index.html` file to adopt the fingerprinting feature:
147147

@@ -174,28 +174,61 @@ In the project file (`.csproj`), add the `<OverrideHtmlAssetPlaceholders>` prope
174174
</Project>
175175
```
176176

177-
Any script in `index.html` with the fingerprint marker is fingerprinted by the framework. For example, a script file named `scripts.js` in the app's `wwwroot/js` folder is fingerprinted by adding `#[.{fingerprint}]` before the file extension (`.js`):
177+
In the following example, all developer-supplied JS files are modules with a `.js` file extension.
178+
179+
A module named `scripts.js` in the app's `wwwroot/js` folder is fingerprinted by adding `#[.{fingerprint}]` before the file extension (`.js`):
178180

179181
```html
180-
<script src="js/scripts#[.{fingerprint}].js"></script>
182+
<script type="module" src="js/scripts#[.{fingerprint}].js"></script>
183+
```
184+
185+
Specify the fingerprint expression with the `<StaticWebAssetFingerprintPattern>` property in the app's project file (`.csproj`):
186+
187+
```xml
188+
<ItemGroup>
189+
<StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.js"
190+
Expression="#[.{fingerprint}]!" />
191+
</ItemGroup>
181192
```
182193

183-
To fingerprint additional JS modules in standalone Blazor WebAssembly apps, use the `<StaticWebAssetFingerprintPattern>` property in the app's project file (`.csproj`).
194+
Any JS file (`*.js`) in `index.html` with the fingerprint marker is fingerprinted by the framework, including when the app is published.
184195

185-
In the following example, a fingerprint is added for all developer-supplied `.mjs` files in the app:
196+
If you adopt the `.mjs` file extension for JS modules, set the file extension with the `Pattern` parameter:
186197

187198
```xml
188-
<StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.mjs"
189-
Expression="#[.{fingerprint}]!" />
199+
<ItemGroup>
200+
<StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.mjs"
201+
Expression="#[.{fingerprint}]!" />
202+
</ItemGroup>
190203
```
191204

192-
The files are automatically placed into the import map:
205+
Files are placed into the import map:
193206

194-
* Automatically for Blazor Web App CSR.
207+
* Automatically for Blazor Web App client-side rendering (CSR).
195208
* When opting-into module fingerprinting in standalone Blazor WebAssembly apps per the preceding instructions.
196209

197210
When resolving the import for JavaScript interop, the import map is used by the browser resolve fingerprinted files.
198211

212+
## Preloaded Blazor framework static assets
213+
214+
In Blazor Web Apps, framework static assets are automatically preloaded using [`Link` headers](https://developer.mozilla.org/docs/Web/HTTP/Reference/Headers/Link), which allows the browser to preload resources before the initial page is fetched and rendered.
215+
216+
In standalone Blazor WebAssembly apps, framework assets are scheduled for high priority downloading and caching early in browser `index.html` page processing when:
217+
218+
* The `OverrideHtmlAssetPlaceholders` MSBuild property in the app's project file (`.csproj`) is set to `true`:
219+
220+
```xml
221+
<PropertyGroup>
222+
<OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
223+
</PropertyGroup>
224+
```
225+
226+
* The following `<link>` element containing [`rel="preload"`](https://developer.mozilla.org/docs/Web/HTML/Reference/Attributes/rel/preload) is present in the `<head>` content of `wwwroot/index.html`:
227+
228+
```html
229+
<link rel="preload" id="webassembly" />
230+
```
231+
199232
### Set the environment in standalone Blazor WebAssembly apps
200233

201234
The `Properties/launchSettings.json` file is no longer used to control the environment in standalone Blazor WebAssembly apps.

0 commit comments

Comments
 (0)