Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Correct way to bundle in MVC4

I'm a bit confused on the correct way to bundle script and style files. Currently, my BundleConfig.cs looks like this:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
            "~/Scripts/knockout-{version}.js",
            "~/Scripts/knockout-{version}.debug.js",
            "~/Scripts/knockout-sortable.js"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.css",
            "~/Content/themes/base/jquery.ui.tabs.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.progressbar.css",
            "~/Content/themes/base/jquery.ui.theme.css"));

bundles.Add(new StyleBundle("~/bundles/BootStrapcss").Include(
            "~/BootStrap/css/bootstrap.css",
            "~/BootStrap/css/bootstrap-fileupload.css"));

bundles.Add(new StyleBundle("~/bundles/BootStrap").Include(
            "~/BootStrap/tpg-main.css",
            "~/BootStrap/tpg-internal.css"));

bundles.Add(new ScriptBundle("~/bundles/BootStrapjs").Include(
            "~/BootStrap/js/bootstrap-fileupload.js",
            "~/BootStrap/js/bootstrap.js"));

BundleTable.EnableOptimizations = true;

Should stay with what I have, or bundle all my script files into one ScriptBundle, and all my styles into one StyleBundle? I want to achieve the best performance possible.

like image 387
broke Avatar asked Sep 25 '13 14:09

broke


People also ask

How is bundling done in MVC?

Bundling and minification techniques were introduced in MVC 4 to improve request load time. Bundling allows us to load the bunch of static files from the server in a single HTTP request. In the above figure, the browser sends two separate requests to load two different JavaScript file MyJavaScriptFile-1.

How do you bundle in MVC?

In an ASP.NET MVC Web Application, while creating a project if you select the MVC template then it auto-generated configuration of bundle files. After Project create, You can check under, App_start folder: You'll find BundleConfig file in which all script and style bundles are defined.

What is difference between bundling and minification?

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. Bundling combines multiple files into a single file. Minification performs a variety of different code optimizations to scripts and CSS, which results in smaller payloads.


1 Answers

If you are always using all of the files than go ahead and stick them in two bundles; one for the javascript and one for the styles. Fewer bundles means fewer requests to the server to fetch the resources, which may result in marginally better performance on the first hit; subsequently the files will be cached by the browser.

If you are not always using all of the files than it makes more sense to break them out into more bundles.

like image 140
asymptoticFault Avatar answered Oct 16 '22 17:10

asymptoticFault