如何使用带有 Scripts.Render 的 ASP MVC 4 Bundles 的脚本延迟属性答案

【问题标题】：How can I use the script defer attribute for ASP MVC 4 Bundles with Scripts.Render如何使用带有 Scripts.Render 的 ASP MVC 4 Bundles 的脚本延迟属性
【发布时间】：2013-05-25 07:56:18
【问题描述】：

我浏览了 Google 和 Stackoverflow 并没有找到答案。是否有任何内置方法可以使包以延迟的方式执行，或者是否有人知道有人为此编写了扩展帮助器方法？

【问题讨论】：

您正在寻找什么样的延迟执行？你能说得更具体些吗？
w3schools.com/tags/att_script_defer.asp
请解释您的应用/页面的具体要求
@kyleb, w3fools.com
我只想推迟页面最初加载不需要的任何脚本。我可能不会经常使用它，但我想知道是否有办法，其他人可能也会搜索 Google。

标签： javascript asp.net asp.net-mvc performance asp.net-mvc-4

【解决方案1】：

尝试将 Web 优化升级到版本 1.1.0 Codeplex Site 或通过Nuget Package

在 1.1.0 版中，它们包含 元素模板字符串。因此，如果您希望脚本标签包含 defer 属性，您可以轻松地做到这一点：

@Scripts.RenderFormat("<script src='{0}' defer></script>","~/bundles/jquery")

会生成以下标记：

<script src="/Scripts/jquery-1.7.1.js" defer></script>

【讨论】：

这打破了使用CdnFallbackExpression 的 CDN 回退。回退检查将在延迟脚本加载之前执行，导致回退总是启动。

【解决方案2】：

answer above 很棒。我只是想快速将我的代码粘贴到这里，以供那些想要更简洁语法的人使用。

添加一个新的 C# 类

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="Scripts7.cs" company="Believe">
//   http://believeblog.azurewebsites.net/
// </copyright>
// --------------------------------------------------------------------------------------------------------------------

using System.Web;
using System.Web.Optimization;

namespace MVCExtension
{
    /// <summary>
    ///     The scripts.
    /// </summary>
    public static class Scripts
    {
        /// <summary>
        /// Render scripts as deferred
        /// </summary>
        /// <param name="paths">
        /// The paths.
        /// </param>
        /// <returns>
        /// The <see cref="IHtmlString"/>.
        /// </returns>
        public static IHtmlString RenderDefer(params string[] paths)
        {
            return Scripts.RenderFormat(@"<script src='{0}' defer></script>", paths);
        }
    }
}

然后，使用 Razor 语法：

@Scripts.RenderDefer("~/bundles/jquery")

或Webform语法：

<%: Scripts.RenderDefer("~/bundles/jquery") %>

【讨论】：

我认为正确的语法是 defer='defer'
这与旧浏览器和 XHTML 解析器具有更广泛的兼容性。阅读更多：w3schools.com/tags/att_script_defer.asp
请解释什么不适合你。有错误信息吗？
我是否遗漏了什么或者这会导致歧义？ Scripts.RenderFormat 不起作用，因为您的班级也被称为 Scripts。不过这很容易解决。

【解决方案3】：

你可以使用BundleTable.Bundles.ResolveBundleUrl：

<script src="@(BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery"))" defer></script>

【讨论】：

也许你可以帮助我。看看这个：stackoverflow.com/questions/57904486/…

【解决方案4】：

迟到的答案，但我想补充一下，因为我遇到了几乎类似的问题，我需要向捆绑脚本添加数据属性（与 GDPR cookie 解决方案相关）。

解决方案 CookieBot 在自动模式下阻止了一些脚本，因此，我需要在手动模式下实现并将我的所有脚本标记为被 CookieBot 脚本忽略。

我在 BungleConfig.cs 中的脚本如下所示：

              bundles.Add(new StyleBundle("~/Bundles/late").Include(
                  "~/Scripts/jquery.pep.js",
                  "~/Scripts/jQuery.easing.1.3.js",
                  "~/Content/swiper/js/swiper.js",
                  "~/Scripts/uiActions.js",
                  "~/Scripts/xxm.js",
                  "~/Scripts/addtohomescreen.js",
                  "~/Scripts/d3.min.js"
            ));

而且，在我的 _Layout.csthml 中。

  @Scripts.RenderFormat("<script data-cookieconsent='ignore' src='{0}' > </script>", "~/Bundles/late")

而且，这是我渲染后得到的。

<script data-cookieconsent="ignore" src="/nyhed/Bundles/late?v=k3Zae8tC12ZNx0x1iAhyu4U0c8xmGE5TrdLdAqg9C8M1"> </script>

现在，原来的问题，可以添加 defer 或 async 以及有或没有数据属性.

Scripts.Render 和 scripts.RenderFormat 都引用了 System。 Web.Optimization，并且应该已经在 MVC 项目中可用。

【讨论】：