Using VS 2013 Update 3 I am creating a new ASP MVC 5 app.
Changing nothing, running this web app with F5, and monitoring the http trafic with fiddler I am seeing that one merged and minified CSS travelling. Debug mode if true in web.config.
I would like the distinct not minified CSS in my browsers developer tools.
What am I missing?
Add to your bundle config
BundleTable.EnableOptimizations = false;
Related
I profiled my ASP.NET MVC application and I saw strange a function calls.
You can see it on image
Always when mvc render layout we invoke system.web.optimization.scripts.render which invoke JsMinify.Process and Minifier.MinifyJavaScript, but I thought what minification should be one time on the start app.
Am I right?
Maybe must I set some settings for optimization it?
Conditions:
localhost
release
BundleTable.EnableOptimizations = true;
Great Question!
Intuitively, you are right, minification of assets should be performed on application Startup. You assume that assets are delivered identically to all browsers. But Microsoft believes that much of JS and CSS is browser specific.
If you check asp.net site's reference on ASP.NET 4.5 Bundling and Minification, they specifically state:
Bundling and minification in ASP.NET 4.5 is performed at runtime, so
that the process can identify the user agent (for example IE, Mozilla,
etc) , and thus, improve the compression by targeting the user browser
(for instance, removing stuff that is Mozilla specific when the
request comes from IE).
:
What about caching?
Bundling isn't as obtuse as a profiled would have you think. If you look up MVC 4 Bundling and Minification reference, they point out:
Bundle Caching
Bundles set the HTTP Expires Header one year from when the bundle is
created. If you navigate to a previously viewed page, Fiddler shows IE
does not make a conditional request for the bundle, that is, there are
no HTTP GET requests from IE for the bundles and no HTTP 304 responses
from the server.
This is far more information than you need, but the message is that, JSMinify has a check for relevant cached minified assets.
When you factor in further that we already use minified version of our assets (eg jquery.min.js, jquery-ui.min.js), you can appreciate that .Net minification is a supplemental process.
Why does Minification of all types have to happen
I migrated MVC3 to MVC4 and added mobile views for my website using JqueryMobile. To "improve" performance i am using Bundles to compres *.js and *.css files.
everything works fine.
After deploying (system nightly build) i saw that bundle .js and .css files are being reloaded every time without using cache.
However, if i run this page on localhost host, page load size decrease from ~1mb to 450kb.
project webconfig Debug is set to false
What could affect it. Is it posible to change directly cache-control to public?
Looks like this could well be an issue in Web Optimisations 1.1.2/1.1.3. Maybe reverting to 1.1.1 can fix the issue as suggested in the following post http://aspnetoptimization.codeplex.com/workitem/127
RegisterBundles :
bundles.Add(new ScriptBundle("~/bundles/AllScripts").Include(
"~/Scripts/jquery.x123.{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/jqRect.js"));
In the Shared Layout file :
#Scripts.Render("~/bundles/AllScripts")
In Global.asax we have :
BundleConfig.RegisterBundles(BundleTable.Bundles);
The scripts didn't combined, also didn't get minified.
This is in release mode.
Is there anything missed?
In your web.config you need to set the attribute debug="false" in the <compilation>-tag.
This means that you can use this flag to allow javascript debugging locally before deploying (debugging minified and bundled javascript is obviously next to impossible).
NOTE: The "Release mode" flag only affects the way the C# (or VB.NET) compiler compiles your classes and is not related to the debug attribute of the <compilation>-tag. Also note that the debug attribute controls whether ASP.NET MVC caches the location of views on disk and thus has a great performance impact: you should always have debug=false in a production environment.
When you develop your project with Debug mode, it doesn't combined and minified. However,
you can force it to do that by setting
BundleTable.EnableOptimizations = true;
ASP.NET MVC 4.0 application - Visual Studio 2012
I cannot get bundling and minification to work in release mode.
My basic non-understanding is:
Do I have to provide the *.MIN.css, *.MIN.js files beforehand, or should VS minify the files on its own? (ie: I provide a mcimagemanager.js and VS makes a mcimagemanager.MIN.js out of it) ???
Here is a code snippet - which gets called in Global.asax:
public static void RegisterBundles(BundleCollection bundles)
{
var im = new ScriptBundle("~/bundles/MCImageManager").Include(
"~/Scripts/tinymce/plugins/imagemanager/js/mcimagemanager.js"
);
bundles.Add(im);
}
it works fine in Debug - not in Release-mode
Thank you!
No you don't need to provide .min file, nor will the bundler create that version (not something you see in the folder, at least).
The difference is this. Let's say you have both jquery-1.9.1.js and jquery-1.9.1.min.js in your scripts folder.
Debug mode will use jquery-1.9.1.js as the source script, and no it won't be minified or bundled, as the whole bundling/minification is disabled in debug mode (though you can override this).
Release mode will use jquery-1.9.1.min.js AND bundle it with other scripts for that bundle.
If you only have the one file, jquery-1.9.1.js, Release mode will use it and minify and bundle it.
Debug mode will NOT use .min files. So if you use a wildcard to include all files for a scripts directory, your .min files will not be included.
Debug mode, if you look at the rendered HTML, will reference all script files in the bundle individually. In Release mode, there will only be one script reference (with a querystring for versioning) per bundle.
Other relevant reading/posts:
Scripts.Render using outdated javascript file
Force ASP.Net MVC Bundle to render the javascript files in a certain order
Bundling and minification framework do also minification itself. So you just provide plain JavaScript/CSS files. It handle on the one hand files itself in the other hand it handle the registration in the view, for eample: #Scripts.Render("~/bundles/jquery"). So it "know" what file needs to be included in the view, weather it is "normal" or "min" version.
More on that topic you can find in this nice Exercise: http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5.aspx
However this is might even better resource for the MVC oriented application: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
I'm working on an ASP.NET MVC 4 app. This app leverages bundling to improve performance. Previously, the app was using jquery.mobile-1.1.0.js. Everything worked fine. However, I've upgraded to JQuery Mobile 1.2 and when I load my screen, I always see a wait spinner. I've pinpointed it to the fact that both the standard and the minified versions are being referenced. When I look in my view-source after the page is loaded, I see the following at the top:
<script src="/Scripts/jquery.mobile-1.2.0.js"></script>
<script src="/Scripts/jquery.mobile-1.2.0.min.js"></script>
From what I can tell, this was generated from the following in my ASP.NET MVC .cshtml file
#Scripts.Render("~/bundles/jquerymobile")
In my BundleConfig.cs file, I have the following definition:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));
Essentially, I want to use the normal version when the debug="true" flag is set in my web.config compilation setting. However, when debug="false", I want to use the minified version. What am I doing wrong?
Thank you
This should happen automatically for you already (assuing the fileextensionreplacement lists still have the default "min" entry for when optimizations are enabled).
As a workaround, you could try this instead which should also work:
.Include("~/Scripts/jquery.mobile-{version}.js"));
This basically is similar to your * except it will regex match for version strings. Note, both this and what you have require that you only have the latest jquery in your Scripts folder, if you still have the 1.1 version there, you will end up with both versions in your page.