Prohibition on `<script>` tags for modules (#34432)

pull/34413/head
Luke Latham 2025-01-07 09:03:15 -05:00 committed by GitHub
parent 393dc8999d
commit 5c3c045dc5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 2 deletions

View File

@ -107,8 +107,8 @@ A Blazor WebAssembly app built as a [Progressive Web App (PWA)](xref:blazor/prog
The Blazor script handles:
* Downloading the .NET runtime, Razor components, and the component's dependencies.
* Initialization of the runtime.
* Downloading the .NET runtime, Razor components, and dependencies.
* Runtime initialization.
The size of the published app, its *payload size*, is a critical performance factor for an app's usability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times:

View File

@ -152,6 +152,9 @@ export function showPrompt2(message) {
}
```
> [!IMPORTANT]
> Don't place a `<script>` tag for `JsCollocation2.razor.js` after the [Blazor script](xref:blazor/project-structure#location-of-the-blazor-script) because the module is loaded and cached automatically when the [dynamic `import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import) is invoked.
Use of scripts and modules for collocated JS in a Razor class library (RCL) is only supported for Blazor's JS interop mechanism based on the <xref:Microsoft.JSInterop.IJSRuntime> interface. If you're implementing [JavaScript `[JSImport]`/`[JSExport]` interop](xref:blazor/js-interop/import-export-interop), see <xref:blazor/js-interop/import-export-interop#razor-class-library-rcl-collocated-js-is-unsupported>.
For scripts or modules provided by a Razor class library (RCL) using <xref:Microsoft.JSInterop.IJSRuntime>-based JS interop, the following path is used:

View File

@ -623,6 +623,7 @@ In the preceding example:
* The path segment for the current directory (`./`) is required in order to create the correct static asset path to the JS file.
* The `{SCRIPT PATH AND FILE NAME (.js)}` placeholder is the path and file name under `wwwroot`.
* Disposes the <xref:Microsoft.JSInterop.IJSObjectReference> for [garbage collection](xref:blazor/components/lifecycle#asynchronous-iasyncdisposable) in <xref:System.IAsyncDisposable.DisposeAsync%2A?displayProperty=nameWithType>.
* Don't place a `<script>` tag for the script after the [Blazor script](xref:blazor/project-structure#location-of-the-blazor-script) because the module is loaded and cached automatically when the [dynamic `import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import) is invoked.
Dynamically importing a module requires a network request, so it can only be achieved asynchronously by calling <xref:Microsoft.JSInterop.IJSRuntime.InvokeAsync%2A>.