Bootstrap 可以异步加载吗？-解网

问：

我已经很久没有使用 Bootstrap 了，并且不确定是否需要在页面构建中非异步加载它。<head>

Google 建议使用以下代码异步加载 JS 文件：

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

我可以以这种方式加载，还是应该非异步加载？bootstrap.min.js

javascript twitter-bootstrap-3

Bootstrap .js 需要 jquery 才能运行。如果您希望获得加载异步脚本的好处，那么您可能还希望加载 jquery（以及可能的其他库）异步......这样做的问题是，你不能保证jquery异步在引导之前完成，使用上面的示例代码。我也确定你有自己的javascript，你想写它来使用bootstrap .js功能。这意味着更多的依赖关系。您可以编写逻辑来手动连接依赖项和异步加载，但随着您可能需要包含的脚本数量的增加，这将成为一项繁重的工作。

Requirejs 是一个库，它为您处理所有这些依赖项管理，并且可以异步（并以正确的顺序）加载您的文件。该库的另一个好处是优化器，它可以跟踪依赖关系并将它们“刻录”到单个（可选缩小）文件中。在使用优化器优化“main”js 文件（包含页面所需的所有依赖项的文件）后，requireJS 可以异步加载该文件。只需要一个脚本包含！

示例如下所示：

/app/main.js：

requirejs.config({
    paths: {
        jquery: "lib/jquery-1.11.0",
        bootstrap: "lib/bootstrap"
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});

//Define dependencies and pass a callback when dependencies have been loaded
require(["jquery", "bootstrap"], function ($) {
    //Bootstrap and jquery are ready to use here
    //Access jquery and bootstrap plugins with $ variable
});

在这种情况下，jquery.js 和 bootstrap.js 将位于 /app/lib 下（以及 require.js）。

在您的 HTML 中，您将有以下脚本标记：

<script src="/app/lib/require.js" data-main="/app/main"></script>

这将加载 bootstrap 和 jquery（以正确的顺序），然后将这些模块作为参数传递（只需要 jquery/$，因为 bootstrap 只是 jquery 之上的一个插件）到您的回调函数。

<script type="text/javascript">
  function requireJSOnload() {
    var element = document.createElement("script");
    element.src = "/js/require.js";
    element.setAttribute('data-main', '/js/main');
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", requireJSOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", requireJSOnload);
  else window.onload = requireJSOnload;
</script>

现在，当你对 https://developers.google.com/speed/pagespeed/insights/ 运行时，你将没有 JS 阻塞脚本。

3赞 Kolappan N 6/20/2021 #3

从 Bootstrap 5 开始，JavaScript 文件可以直接异步加载。

虽然 Patrick 的答案对于 Bootstrap 4 及以下版本是正确的，但 Bootstrap 5 删除了 jQuery 依赖项，该依赖项允许在 or 中加载完整的脚本。asyncdefer

Bootstrap 可以异步加载吗？

Can Bootstrap be loaded asynchronously?

评论

评论

评论