javascript - 延迟在 asp.net MVC 中加载 javascript

Question

我希望优化在我的 MVC 项目中加载较大的 javascript 文件的方式。我已经在使用捆绑和缩小，但我真的想在加载 HTML 和 CSS 之后只加载其中的一些。我在看这种方法:

https://varvy.com/pagespeed/defer-loading-javascript.html

在这种方法中，在加载正文后，在加载/加载事件中使用 javascript 将脚本标记注入(inject)。我的问题是我想与框架提供的捆绑和缩小一起使用，但我还没有找到一个好的方法来做到这一点。

我只是想知道是否有人已经成功地将这种方法用于 MVC 项目，以及是否可能已经有一个库(在 Nuget 或其他方面)来促进这一点。

已编辑:这是我目前的解决方案，但我不确定我是否喜欢它。

由于捆绑框架可以返回单个脚本标签或它们的列表，具体取决于您是否在调试中运行，我们需要提取这些标签的源值。为此，我创建了一个静态助手。

public static string ExtactFromScriptBundle(string aBundle)
    {
        List<string> returnValue = new List<string>();

        var jQueryString = Scripts.Render(aBundle).ToHtmlString();

        var reg = new Regex("\".*?\"");

        var matches = reg.Matches(jQueryString);
        foreach (var match in matches)
        {
            returnValue.Add(match.ToString().Replace("\"", ""));
        }

        return Json.Encode(returnValue);
    }

在 _layout.cshtml 中，您可以在标记之前插入如下所示的 block :

<script>
    function downloadJSAtOnload() {
     createScripElementsFromArray(@Html.Raw(ScriptHelper.ExtactFromScriptBundle("~/bundles/jquery")));
createScripElementsFromArray(@Html.Raw(ScriptHelper.ExtactFromScriptBundle("~/bundles/bootstrap")));
    }

    function createScripElementsFromArray(fileNameList) {
        var arrayLength = fileNameList.length;
        for (var i = 0; i < arrayLength; i++) {
            createScripElement(fileNameList[i]);
        }
    }

    function createScripElement(fileName) {
        var element = document.createElement("script");
        element.src = fileName;
        document.body.appendChild(element);
        console.log(fileName + " was loaded");
    }

    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

在我看来这有点麻烦，因为我渲染包只是为了解析输出，但我想我也可以缓存这些输出以进一步优化页面渲染。

Answer 1

通过 Occam's Razor , 最好的解决方案是使用 defer 属性 ...

<script src='myJavaScriptFile.js' defer></script>

是well supported .

如果你想在 ASP.NET MVC 中使用它，那么你将这样做:

像这样创建一个新的 Razor 命令:

public static class Scripts
{
    public static IHtmlString RenderDeferred(params string[] paths)
    {
        return Scripts.RenderFormat(@"<script src='{0}' defer></script>", paths);
    }
}

然后像这样使用它:

@Scripts.RenderDeferred("~/myBundle/myJavaScriptBundle")