How to correctly bundle styles and scripts in MVC 4?

Question

Much as I like MVC, so much I don't understand bundling. I read several documents about bundling, but I did not find a general concept until now how to use it for my scripts and styles.

The only solution that works consistently after many hours of trial and error, is:

Create bundle for script x.js with relative path a/b/c as:

var bundle = new ScriptBundle("~/a/b/c/bundle").Include("~/a/b/c/x.js");
bundles.Add(bundle);

Create bundle for style x.css with relative path a/b/c as:

var bundle = new StyleBundle("~/a/b/c/bundle").Include("~/a/b/c/x.css");
bundles.Add(bundle);

And reference it in Views as

@Scripts.Render("~/a/b/c/bundle");
@Styles.Render(("~/a/b/c/bundle");

Obviously the drawback is that for every path I need a single bundle with a key that is constructed as "path" + postfix (I use "bundle" but everything else would also do).

My path look as:

Content\
- Calendar\
- DatePicker\
- JqGrid\
- Template\
  - FontAwesome\
- ...
Scripts
- DayPilot
- jqGrid
- jqPlot
- ...

Is there any clever way / best practice how to create and use bundles or to organize the path for scripts and styles?

Comment: I don't see this question as duplicate of How to Bundle and render scripts in mvc 4 -- asp.net? also when the titles as quite similar.

Are you looking for a better way to bundle YOUR custom css and scripts, or is it all scripts and css (including vendors)? — jpgrassi
– jpgrassi, Commented Dec 23, 2015 at 10:27
@jpgrassi I look for a way to bundle all scripts and styles. — StefanG
– StefanG, Commented Dec 23, 2015 at 12:38
In the projects I've worked on, we separate the "vendors" scripts (bootstrap, jquery, angular etc" into a bundles/js/vendors. Our custom scripts, we put in a different bundle. — jpgrassi
– jpgrassi, Commented Dec 23, 2015 at 12:48
@jpgrassi this makes sense. can you give me an example how you create the vendors bündle (what key and how is the structure). I read in some Blogs that it also depends on the vendor if and how bundling works. — StefanG
– StefanG, Commented Dec 23, 2015 at 15:19

DevGuru · Accepted Answer · 2015-12-23 10:23:54Z

4

Bundling and minification improves the load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript). You can create a single bundle for all your CSS but grouping vendor related and custom content separately, increases the manageability. The bundle is treated as single CSS/Javascript file and will require one request although the time it takes to load will increase. To reduce the load time, think about minifying the bundle contents by adding the following

BundleTable.EnableOptimizations = true;

in your bundle registration method.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));    

    BundleTable.EnableOptimizations = true;
}

Using CDN for Jquery and other standard CSS/Javascripts is a good approach as the content loads parallel from different servers.

http://www.asp.net/mvc/overview/performance/bundling-and-minification

answered Dec 23, 2015 at 10:23

DevGuru

1563 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StefanG Over a year ago

Sorry, but this does not answer my question and is also not correct: AFAIK BundleTable.EnableOptimizations only forces bundling in debug mode, it is enabled by default in release mode. See also stackoverflow.com/a/25451835/2707156

Collectives™ on Stack Overflow

How to correctly bundle styles and scripts in MVC 4?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related