问题描述
我的网站使用 RequireJS 加载其他脚本。不幸的是，这些页面是由独立的小应用程序组成的，这些应用程序以 HTML 片段的形式提供（实际上它是一个 Java 门户），其中一些包含依赖于 RequireJS 模块的内联脚本。
问题是在底层加载RequireJS时，body中的应用程序无法使用它，因为它还不可用。
所以我们想出了两个解决方案：
- 将 RequireJS 移至
<head>标记 - 在 RequireJS 加载后解析的
requireJsLoadedPromise的第一个<script>中定义一个 promise 变量head。因为它是第一个脚本，所以每个应用程序都可以注册一个处理程序，一旦 RequireJS 可用，该处理程序就会被调用。脚本可以这样使用它：
requireJsLoadedPromise.then(requirejs => requirejs(['my/module'],/* ... */);
如您所见，解决方案 2 更为复杂，并且是一种非标准解决方案，仅适用于专门为其设计的应用程序。由于额外的承诺处理程序，它还导致更多的嵌套。此外，它还会导致 <head> 中的脚本类似于解决方案 1，因此在页面加载性能方面可能与解决方案 1 一样糟糕。
我想知道解决方案 1 的缺点是什么。如果在头部加载 RequireJS 会对页面加载性能产生明显影响，这可能证明解决方案 2 是合理的。
但我更愿意假设 RequireJS 在加载时不会做任何事情，并且会在脚本开始调用 requirejs() 时立即执行其主要工作。但是我不确定。
搬到 <head> 会产生明显的影响吗？
对于这个问题还有更好的解决方案吗？
解决方法
我们在项目中遇到了类似的问题。
我们实现了与 Google DataLayer 类似的机制。在页面的头部，我们做了一个与 RequireJS 具有相同 API 的小脚本，但它只是将脚本排队，直到真正的 RequireJS 加载。加载后，它弹出每个项目并调用真正的 RequireJS。
如果您有更多问题，请随时提出。