Question

我在nopcommerce 3.80中使用Html.AppendScriptParts方法的“异步”属性，就像Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);

一样

谷歌PageSpeed工具给了它一个高分，这是我预期的：但它似乎对网站的其他功能有影响（nivo滑块，来自Seven Spikes插件的ajax过滤器，......）

我没有在nopcommerce中使用js和css捆绑功能。你能告诉我现在我的场景中最好的解决方案吗？任何帮助都非常有用。非常感谢你。

这是我的_Root.head.cshtml代码：

@using Nop.Core.Domain.Common;
@using Nop.Core.Domain.Seo
@using Nop.Core.Infrastructure;
@{
    var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;

    Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
    Html.AppendScriptParts("~/Scripts/public.common.js");
    Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
    var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
    if (commonSettings.RenderXuaCompatible)
    {
        Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
    }
    var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
    if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
    {
        Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
    }
}
<!DOCTYPE html>
<html@(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) @Html.NopPageCssClasses()>
<head>
    <title>@Html.NopTitle()</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="description" content="@(Html.NopMetaDescription())" />
    <meta name="keywords" content="@(Html.NopMetaKeywords())" />
    <meta name="generator" content="nopCommerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    @Html.NopHeadCustom()
    @Html.Partial("Head")
    @Html.Widget("head_html_tag")
    @Html.NopCssFiles(this.Url, ResourceLocation.Head)
    @Html.NopScripts(this.Url, ResourceLocation.Head)
    @Html.NopCanonicalUrls()
    @Html.Action("RssHeaderLink", "News")
    @Html.Action("RssHeaderLink", "Blog")
    @Html.Action("Favicon", "Common")
    @if (displayMiniProfiler)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()
    }
</head>
<body>
    @RenderBody()
    @Html.NopCssFiles(this.Url, ResourceLocation.Foot)
    @Html.NopScripts(this.Url, ResourceLocation.Foot)


</body>
</html>

Answer 1

首先，它与Seven Spikes插件无关。此问题是由于async行为造成的。当您将jquery文件设置为异步时，这意味着应用程序将不会等待加载该文件并将加载下一个js文件。但是其他js文件依赖于第一个主文件，这就是你得到错误的方式。

让我们了解当前场景，默认代码为：

Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");

在这种情况下，js文件的顺序是：

现在异步加载jquery min js文件。

Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);

然后检查控制台：

通过此更改，您将收到错误要解决此问题，您必须根据依赖项以特定顺序加载js min文件。

Side注意：这个问题也是默认代码!!我已经使用nopCommerce 3.80和3.90

进行了测试

nopcommerce 3.80 ender-blocking JavaScript和CSS的首要内容

1 个答案: