在 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：

索引.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/ritic-rendering-path/adding-interactivity-with-javascript）
• 将其标记为异步以修复渲染阻塞后，无需等待其加载即可调用某些方法:)
• 最终用户的网络开销更小
• 与 blazor 生成的 PWA service-worker.js 的开箱即用集成（https://learn.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore- 3.1&tabs=视觉工作室)