nopcommerce 3.80折叠式内容中的阻止发布者的JavaScript和CSS

Question

I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true); 我在nopcommerce 3.80中使用Html.AppendScriptParts方法的“异步”属性，例如Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);

The google PageSpeed Tools give it a high score which is i expected: 谷歌PageSpeed工具给它一个很高的分数，这是我所期望的： But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... ) 但这似乎对网站的其他功能有影响（nivo滑块，来自Seven Spikes插件的ajax过滤器，...）

I'm not using js and css bundling feature in nopcommerce. 我没有在nopcommerce中使用js和CSS捆绑功能。 Can you guys please tell me what is the best solution in my scenarior now ? 你们能否告诉我，现在我的方案设计师中最好的解决方案是什么？ Any helps are very appriciated. 任何帮助都非常有用。 Thank you so much. 非常感谢。

Here is my code of _Root.head.cshtml: 这是我的_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

First, it's not related to Seven Spikes plugins. 首先，它与七个尖刺插件无关。 This issue is because of async behavior. 此问题是由于async行为。 When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. 当您将jquery文件设置为异步文件时，这意味着应用程序将不等待加载该文件并加载下一个js文件。 But other js file are depended on first main file, and that's way you're getting errors. 但是其他js文件依赖于第一个主文件，这就是您遇到错误的方式。

Let's understand it with current scenario, the default code is: 让我们了解当前情况，默认代码为：

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");

In this case the order of js files are: 在这种情况下，js文件的顺序为：

Now load jquery min js file asynchronously. 现在异步加载jquery min js文件。

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

And check console: 并检查控制台：

With this change you will get an error(s). 进行此更改后，您将得到一个或多个错误。
To resolve this issue, you have to load js min file in one particular order on basis of dependency. 要解决此问题，您必须基于依赖关系以特定顺序加载js min文件。

Side Note: this issue is with default code too!! 注意：这个问题也是默认代码！ I've tested with nopCommerce 3.80 and 3.90 我已经使用nopCommerce 3.80和3.90进行了测试

nopcommerce 3.80折叠式内容中的阻止发布者的JavaScript和CSS

问题描述

1 个解决方案

解决方案1
1 2017-12-07 13:07:43

nopcommerce 3.80折叠式内容中的阻止发布者的JavaScript和CSS

问题描述

1 个解决方案

解决方案1 1 2017-12-07 13:07:43

解决方案1
1 2017-12-07 13:07:43