在Blazor客户端加载JS模块的最佳实践是什么

Question

在Blazor中有几个执行JavaScript代码的选项：

1. 将js文件加载到IJSObjectReference的实例中，并对其调用InvokeAsync：

Blazor组件的代码隐藏文件：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
IJSObjectReference module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", ".script1.js");
await module.InvokeVoidAsync("sampleFunction1");
}
}

2. 将js文件作为脚本添加到HTML标记中，并在IJSRuntime实例上调用InvokeAsync：

index.html:

<script src="script1.js"></script>

Blazor组件的代码隐藏文件：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("sampleFunction1");
}
}

这两种方法都有效，但从性能、代码维护和代码清洁度的角度来看，哪种方法更可取？

Answer 1

我会使用第一个(在OnAfterRenderAsync期间导入(，下面是我的解释：

1. 如果您将js作为特定组件的扩展编写，您将获得可重用、可分解和可维护的js模块，这些模块可以在未来的单元测试/重构中轻松覆盖。

2. 未使用但已加载在浏览器中的js内容的百分比将更小，效率更高。最终用户不应该接收到"的js束；以防万一"；。遗憾的是，blazor本身并没有使用这样的前端优化；以防万一"；密码与blazor.server.js 相比，覆盖了几个js模块

3. 无需在渲染中放置javascript链接。它带来了一些好处：

• 预渲染的html没有受到关键渲染路径阻塞程序的污染(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript(
• 在将其标记为async以修复渲染阻塞后，无需等待加载它来调用某些方法：(
• 为最终用户减少网络开销
• 开箱即用集成到blazor(https://learn.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-3.1&tabs=visual studio(