选择性加载Javascript

Question

我有一些用于录音和转换为.mp3的JS库，我想在Blazor网站的一个页面上使用这些库。但我绝对不希望所有网站访问者都预先加载超过1MB的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://learn.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，这是已经讨论过的领域。