非同期ロードでMVCバンドルを注文する方法は？

私はMVC 4でウェブサイトを設計しました。今、リソースのロードとスクリプトの実行のタイミングに問題がありました。なぜなら、より高い優先順位（例えば、jQuery）を持ち、最初に実行されなければならないが、他のスクリプトの後ろに読み込まれ、それらに依存するスクリプトが以前に読み込まれて実行されているライブラリがエラーを引き起こしているからです。非同期ロードでMVCバンドルを注文する方法は？

スクリプトの私のバンドルは次のとおりです。

bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
          "~/Scripts/jquery-{version}.js", 
          "~/Scripts/jquery-migrate.min.js", 
          "~/Scripts/jquery.unobtrusive-ajax.min.js", 
          "~/Scripts/jquery.knob.min.js", 
          "~/Scripts/toastr.min.js", 
          "~/Scripts/bootstrap.min.js", 
          "~/Scripts/respond.js", 
          "~/Scripts/bootstrap-select.min.js", 
          "~/Scripts/smoothscrool.js", 
          "~/Scripts/scrollReveal.js", 
          "~/Scripts/easing.min.js", 
          "~/Scripts/site.js")); 


bundles.Add(new ScriptBundle("~/bundles/contact").Include(
      "~/Scripts/contact.js"));

これが私のレイアウトです：

<!DOCTYPE html> 
<html lang="en"> 
<head> 

</head> 
<body> 
    @Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/scripts") 

    <div id="page-content">   
     @RenderBody() 
    </div> 

    @RenderSection("scripts", required: false) 
</body> 
</html>

あなたが見ることができるように、身体の初めに、スクリプトが非同期をロードする：

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/scripts")

これは私のコンタクトビューの剃刀コードです：

@section scripts { @Scripts.Render("~/bundles/contact") } <div> Contact Contents </div>

ここでセクションスクリプトは本体の最後にロードされますが、しかし、リソースの非同期ロードのために、従属スクリプトは以前にロードされていた（レイアウトスクリプトよりもコンパクトであるため）、エラーが発生しました。

すべてのレイアウト非同期スクリプトを実行した後に依存スクリプトを強制的に実行する方法

出典

2016-11-05 Behzad

はあなたのような音すべてのものが正しく注文された状態で1つのタグ/ファイルを吐き出すだけでよいのです。 https://msdn.microsoft.com/en-us/library/system.web.optimization.scripts.renderformat(v=vs.110).aspx * RenderFormatは、指定された書式文字列を使用して、指定されたパスのスクリプトタグを生成します。 EnableOptimizationsがfalseに設定されている場合、バンドル内の各項目に対して複数のスクリプトタグが生成されます。最適化を有効にすると、バンドル全体を表すバージョンスタンプ付きのURLに単一のスクリプトタグが生成されます*スクリプトごとにビューごとに1つのバンドルが必要です。 –

@ ta.speot.is EnableOptimizationsがtrueです。私のcontact.jsスクリプトはContactビューで使用されていますので、レイアウトバンドルに追加する権利です。このスクリプトはすべてのページにロードされます。 – Behzad

*ビューごとに1つのバンドルが必要* –

レイアウトビューでは、そのビューがレイアウトから呼び出されたときに、すべてのビューにリソースを追加するための動的バンドルを追加する必要があります。つまり、動的バンドルクラス内の任意のビューリソースを定義することによって、1つのファイル内のスクリプトバンドルとスタイルバンドルをすべてのビューに生成できます。例については

：で最後

public class BundleConfig 
    { 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      var styles = new string[] 
      { 
       "~/Content/bootstrap.min.css", 
       "~/Content/bootstrap-select.min.css", 
       "~/Content/font-awesome.min.css", 
       "~/Content/toastr.min.css", 
       "~/Content/front.css", 
       "~/Content/style.css" 
      }; 

      var zocial = new string[] { "~/Content/zocial.css" }; 

      var gridmvc = new string[] 
      { 
       "~/Content/Gridmvc.css", 
       "~/Content/gridmvc.datepicker.min.css" 
      }; 

      bundles.Add(new StyleBundle("~/Content/stylesheets").Include(styles)); 
      bundles.Add(new StyleBundle("~/Content/stylesheets-zocial").Include(styles.Concat(zocial).ToArray())); 
      bundles.Add(new StyleBundle("~/Content/stylesheets-gridmvc").Include(styles.Concat(gridmvc).ToArray())); 


     } 
} 


public static class BundleExtensions 
{ 
     public static string GetViewBundleName(this System.Web.Mvc.HtmlHelper helper, BundleType bundleType) 
     { 
      var controller = helper.ViewContext.RouteData.Values["controller"].ToString(); 
      var action = helper.ViewContext.RouteData.Values["action"].ToString(); 

        switch (controller.ToLower()) 
        { 
         case "home": 
          { 
           switch (action.ToLower()) 
           { 
            case "index": return "~/Content/stylesheets-homepage"; 
            default: 
             return "~/Content/stylesheets"; 
           } 
          } 
         case "sitemaps": 
          return "~/Content/stylesheets-zocial"; 

         case "blogs": 
          return "~/Content/stylesheets-gridmvc"; 

         case "account": 
          return "~/Content/stylesheets-jqueryval"; 


         default: 
          return "~/Content/stylesheets"; 
        } 
     } 
}

、レイアウトで、非同期のスクリプトにこのモデルを追加する必要があります：このパスApp_Start\BundleConfigでBundleConfigが

クラス

Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", Html.GetViewBundleName(BundleType.Scripts)))

出典

2016-11-09 13:01:56

非同期ロードでMVCバンドルを注文する方法は？

答えて

関連する問題