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

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

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

Blazor组件的代码隐藏文件：

AfterRenderAsync（bool firstRender）上的受保护重写异步任务
{
if（firstRender）
{
IJSObjectReference模块=等待JSRuntime.InvokeAsync（“导入”，“脚本1.js”）；
wait module.InvokeVoidAsync（“sampleFunction1”）；
}
}

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

index.html：

Blazor组件的代码隐藏文件：

AfterRenderAsync（bool firstRender）上的受保护重写异步任务
{
if（firstRender）
{
等待JSRuntime.InvokeVoidAsync（“sampleFunction1”）；
}
}

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

我将使用第一种方法（在OnAfterRenderAsync期间导入），下面是我的解释：

如果您将js作为特定组件的扩展来编写，您将获得一个可重用、可分解和可维护的js模块，这可以很容易地被将来的单元测试/重构所覆盖

未使用但加载到浏览器中的js内容的百分比将很小，而且效率更高。最终用户不应收到“以防万一”的js束。遗憾的是blazor本身并没有使用这样的前端优化，并且加载了很多“以防万一”的代码。

无需在render中放置javascript链接。它带来了一些好处：

• 预渲染html不受关键渲染路径阻止程序（）的污染
• 在将其标记为async以修复渲染阻塞之后，无需等待加载它来调用某些方法：）
• 最终用户的网络开销更小
• 与blazor（）生成的PWA service-worker.js的开箱即用集成