问题标签 [deferred-loading]

下图中的控制台屏幕截图我在 Angular 应用程序中有 vendor.js 和 main.js，我想推迟加载这些脚本，但是在我的项目中执行它的位置是我的 component.ts

索引.html

我想推迟在 Angular 应用程序中加载我的 vendor.js 包。我应该寻找哪种方法，因为没有直接的方法可以以角度延迟加载包。这是我的 src index.html

我希望能够加载 FontAwesome 子集（支持我网站中使用的核心图标），然后延迟加载整个 fontawesome 库（因此 CMS 内容作者可以使用他们想要的任何图标。

FontAwesome Kits 已经发布（因为我有一个 Kickstarter 支持者许可证）。

我想我可以简单地创建我的font-awesome-subset.js并使用 eventListener onDOMContentLoaded来加载fontawesome/js/all.js，但是当两个文件都被加载时，只有子集的图标被转换为 SVG。

假设问题是library.add()我的子集中没有被 覆盖all.js，然后我尝试创建另一个font-awesome-all.js可以调用的文件library.add('far', 'fas'...)，但是 webpack 认为将所有图标都包含在font-awesome-subset.js 和 font-awesome-all.js中会更有效。

关于如何做到这一点的任何建议？

这是一个代码示例：

在我的网站上，我使用 javascript 模块，根据 MDN ，默认情况下这些模块是延迟的。我有一些额外的 javascript，只有在这些模块加载并执行后才能安全执行。MDN在这里指出延迟的脚本执行保证在DOMContentLoaded事件触发时已经发生。此外，这里建议您还可以考虑此事件已经触发的情况，如下所示：

上面的块似乎是我正在寻找的。但是 MDN 上其他地方的文档让我不确定这是否真的正确。例如，为什么readystate上面的检查寻找loading而不是loadingOR interactive？上的文档readystate说loading紧随其后interactive，并且处于“脚本、图像、样式表和框架interactive等子资源仍在加载”状态。

因此，在我看来，这里存在不一致之处。建议的readystate检查不足以保证DOMContentLoaded已触发，或者DOMContentLoaded不足以保证延迟脚本已完成。