在头部加载RequireJS答案

【问题标题】：Load RequireJS in head在头部加载RequireJS
【发布时间】：2021-10-02 04:46:52
【问题描述】：

我的网站使用 RequireJS 来加载其他脚本。不幸的是，这些页面是由独立的小应用程序组成的，这些应用程序以 HTML 片段（实际上是一个 Java 门户）的形式提供，其中一些包含依赖于 RequireJS 模块的内联脚本。

问题是当RequireJS在底部加载时，body中的应用程序无法使用它，因为它还不可用。

所以我们想出了两个解决方案：

将 RequireJS 移至 <head> 标签
在head 的第一个<script> 中定义一个promise 变量requireJsLoadedPromise，它将在加载RequireJS 后解析。因为它是第一个脚本，所以每个应用程序都可以注册一个处理程序，该处理程序将在 RequireJS 可用时立即调用。脚本可以这样使用它：

requireJsLoadedPromise.then(requirejs => requirejs(['my/module'], /* ... */);

如您所见，解决方案 2 更为复杂，并且是一种非标准解决方案，仅适用于专门为其设计的应用程序。由于额外的 Promise 处理程序，它还会导致更多的嵌套。此外，它也会像解决方案 1 一样导致 <head> 中的脚本，因此在页面加载性能方面可能与解决方案 1 一样糟糕。

我想知道解决方案 1 的缺点是什么。如果在头部加载 RequireJS 将对页面加载性能产生显着影响，这可以证明解决方案 2 的合理性。但我宁愿假设 RequireJS 在加载时几乎不会做任何事情，并且会在脚本开始调用 requirejs() 时立即执行其主要工作。但是我不确定。

转移到<head> 会产生明显的影响吗？

对于这个问题还有更好的解决方案吗？

【问题讨论】：

为什么会有任何缺点？将脚本放入头部是很常见的，而像 Webpack 这样的打包工具将脚本放入头部。
将脚本放在底部是一种常见的最佳做法。在头部，脚本会中断 html 处理
那个“常见的最佳实践”可能已经过时了 10 年。只需添加属性async 和defer：developer.mozilla.org/en-US/docs/Web/HTML/Element/script
例如，您可以检查 Stack Overflow 的代码。大多数脚本都放在头部，属性为async。
快速研究表明这是不可能的：异步不再保证脚本顺序。所以可能会发生在依赖脚本之后加载RequireJS：stackoverflow.com/a/53274388/395879

【解决方案1】：

我们在项目中遇到了类似的问题。

我们实现了与 Google DataLayer 类似的机制。在页面的头部，我们做了一个与 RequireJS 具有相同 API 的小脚本，但它只是将脚本排队，直到真正的 RequireJS 加载。加载后，它会弹出每个项目并调用真正的 RequireJS。

如果您还有更多问题，请随时提出。

【讨论】：