blazor - 选择性加载 Javascript

Question

我有一些用于录音和转换为 .mp3 的 JS 库，我想在 Blazor 网站的一个页面上使用它们。但我绝对不希望网站的所有访问者都预加载超过 1 MB 的 JavaScript，以防万一他们可能会导航到网站的该部分。

有任何想法吗？

Answer 1

为什么不使用动态导入？

import('module.js').then(module => {
   ...
});

Answer 2

我假设您正在编写单页应用程序。有几种方法可以做到这一点。

我推荐的一个好方法是 JavaScript 的延迟加载，这样只有在您真正想要调用文件内容时才加载文件。为了进一步了解这一点，我建议查看：https ://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading 。

如果您有库的 WebAssembly 副本，因为您使用的是 Blazor，您应该能够使用 Blazor 延迟加载这些库。有关详细信息，请参阅https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-5.0。

从之前的帖子中您将看到，执行此操作的旧方法是使用 jQuery。然而，这不再是推荐的做法。jQuery 提供了一种getScript方法，请参见https://api.jquery.com/jquery.getscript/的文档或在 JS 中动态加载 JS作为已讨论的区域。