在 Blazor 客户端加载 JS 模块的最佳做法是什么？答案

【问题标题】：What is the best practice to load JS modules in Blazor client side?在 Blazor 客户端加载 JS 模块的最佳做法是什么？
【发布时间】：2021-02-21 13:11:12
【问题描述】：

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

将 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");
            }
        }

将 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");
            }
        }

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

【问题讨论】：

标签： blazor blazor-client-side blazor-webassembly asp.net-blazor

【解决方案1】：

我会使用第一个（在 OnAfterRenderAsync 期间导入），这是我的解释：

如果您将 js 编写为特定组件的扩展，您将获得可重用、分解和可维护的 js 模块，将来可以轻松地通过单元测试/重构来覆盖。
未使用但已加载到浏览器 js 内容中的百分比将更小且更高效。最终用户不应该因为“以防万一”而收到一堆 js。可悲的是，blazor 本身并没有使用这种前端优化，并且会加载大量“以防万一”的代码。 coverage for several js modules in comparison to blazor.server.js
无需在渲染中放置 javascript 链接。它带来了一些好处：

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

【讨论】：