I have the following bundle configured in BundleConfig.cs:
bundles.Add(new StyleBundle("~/bundles/css").Include( "~/assets/bootstrap/css/bootstrap.css", "~/assets/css/global/all.css"));
and I reference it using the following:
@Styles.Render("~/bundles/css")
When I'm in debug mode (web.config compilation debug="true"
) it works as expected in that it renders both css files as normal ie:
<link href="/assets/bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="/assets/css/global/all.css" rel="stylesheet"/>
However when I set debug="false"
the above behaviour still occurs in that it does recognise the files, however it's just rendering them as normal.
To confirm bundling can definitely work I've enabled optimizations in BundleConfig ie BundleTable.EnableOptimizations = true;
Whenever I do the above, it bundles the css and appears as expected ie:
<link href="/bundles/css?v=WBKHkZAJly7jUzHrVDT8SwfaQE-CA9dbOUQUlLKadNE1" rel="stylesheet"/>
EDIT:
A few people have mentioned that adding the following code to my BundleConfig.cs file will achieve what I am after:
#if DEBUG BundleTable.EnableOptimizations = false; #else BundleTable.EnableOptimizations = true; #endif
I understand and appreciate this response, however according to the documentation, the default behaviour of MVC bundling is to bundle in release mode but not in debug mode. I don't see why I should need to add extra code to make it do this when it should be doing it already.
EDIT 2
I've a confession to make. It turns out I had the web.config from the Views folder opened and not the main web.config. I changed the setting in the main web.config and this works just fine for me. I blame ReSharper
Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web. config file. In the following XML, debug is set to true so bundling and minification is disabled. To enable bundling and minification, set the debug value to "false".
Creating a Bundle in MVCBundling can create separate requests for CSS and JavaScript files. For example, if an application uses both the bootstrap and site CSS for UI design, we can create a common bundle for them. After Bundling, we need to register this bundle in the Application.
Both bundling and minification are the two separate techniques to reduce the load time. The bundling reduces the number of requests to the Server, while the minification reduces the size of the requested assets.
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.
This is the default behavior.
Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web.config file.
http://www.asp.net/mvc/overview/performance/bundling-and-minification
The way that I get around this is to force it in the BundleConfig
to do exactly what I want it to do. I don't think MVC4 had the same options with the config file (or I just never got them to work).
So this is what I have at the end of my RegisterBundles method:
#if DEBUG BundleTable.EnableOptimizations = false; #else BundleTable.EnableOptimizations = true; #endif
This way it's always there, plain to see. However, you do have to remember to put that in there when you're starting up the project, but that's not a huge deal.
If you're not familiar with these, the #if DEBUG
is a preprocessor directives that tells the CLR to do what is in that block when the DEBUG build parameter is present (should only be present in DEBUG mode, though that can be changed from the Project Properties). If that variable is not present (Release mode, or any other mode), then it will do the other block.
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