Menu
I've designed a website by MVC 4. Now, I had a problem with the timing of resource loading and execution of scripts. Because, The libraries that have higher priority (such as jQuery) and should be run at the first, but loaded later of others, and scripts are dependent on them loaded and run earlier are causing to errors!
My bundles of scripts is:
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"));
This is my layout:
<!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>
As you can see, at the beginning of body, the scripts to be loaded async:
@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/scripts")
And this is my Contact View razor codes:
@section scripts
{
@Scripts.Render("~/bundles/contact")
}
<div>
Contact Contents
</div>
Now, although section script is loaded in the end of the body. But due to the asynchronous loading of resources, dependent script loaded earlier (Because it is more compact than the layout scripts) and caused to error!
How to force dependent scripts to run after running all layout asynchronous scripts !?
267
Bundling and Minification are two performance improvement techniques that improves the request load time of the application. Most of the current major browsers limit the number of simultaneous connections per hostname to six. It means that at a time, all the additional requests will be queued by the browser.
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. You can create CSS, JavaScript and other bundles. Fewer files means fewer HTTP requests and that can improve first page load performance.
In the layout view you should add a dynamic bundle for add resources to every view when that view called from layout. in the other words, you can generate script bundle and styles bundle within one file to every view by define any view resources in the dynamic bundle class.
For Example :
class BundleConfig in this path App_Start\BundleConfig:
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";
}
}
}
At last, in the layout, must be add scripts this model for async:
Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", Html.GetViewBundleName(BundleType.Scripts)))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
