From what I have read, I know that MVC bundles can "smartly" include the correct js file (minified or regular) based on whether you are debugging or not. Ideally, I'd like it to load the standard AngularJS when I'm debugging, and the minified version when I am not.
I have the following in my BundleConfig.cs:
bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/angular", "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js")
.Include(~/Scripts/angular.js"));
and in my view:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/angular")
}
It doesn't seem to work unless I add BundleTable.EnableOptimizations = true; to BundleConfig.cs, but I am skeptical of this. Is this OK to leave in for development AND production? Is this forcing it to always use the regular or minified version in all cases, as opposed to smartly switching like I want? From what I can tell, it appears to be using the non-minified version regardless of whether I am running with the debugger or not, or in release configuration or not.
The other option seemed to be setting debug=false in the web.config, but this prevents me from debugging without manually modifying the file, and I'd like it to be handled automatically if possible.
Then I noticed that MVC uses a * syntax for jquery, which happens to have normal and minified versions included:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
So I tried .Include(~/Scripts/angular*")); thinking it was a wildcard that would include .js or .min.js as appropriate but that didn't seem to work either.
Should I be doing something differently?
Related
I have a small JS library in my MVC 5 project that I want to be available for external users to load into their apps. At the moment I'm bundling it like so:
bundles.Add(new ScriptBundle("~/clientApi")
.IncludeDirectory("~/Api/clientapps/", "*.js"));
I can then access the bundled library via browser at the path /clientApi.
However, it's always minified, even though I've set my web.config debug=true, and other bundles in my own app are included as non-minified.
How can I make the file/s in the bundle available as a non-minified bundle file?
If you access /clientApi directly then yes it will be the bundled/minified version.
The debug=true option effects your script reference in your own .cshtml file. When debug=true, references to the individual script files are rendered to the client (so the client doesn't use /clientApi at all).
When debug=false, then a reference to /clientApi (with the version query string) is rendered to the client instead, so they get the bundled/minified version... If you give that link to these external users, then that is what is going to get rendered.
That path doesn't care if it is debug or not. It's not like /clientApi is going to bundle but not minify the files depending on your compilation settings... it's just either your app is going to render the bundled/minified path or the individual script paths.
If you want to do debugging/testing in external apps, then they will just have to use the individual script paths.
Even if you do give these external apps the /clientApi reference once testing is done and they are ready to use the bundled/minified version, it doesn't explain how you are going to handle versioning. If you update a script, how will they know to stop caching?
Actually you can serve the bundle unminified if you disable the transforms of the Bundles
protected void Application_Start() {
BundleTable.EnableOptimizations = true; // Force bundling to occur
// If the compilation node in web.config indicates debugging mode is enabled
// then clear all transforms. I.e. disable Js and CSS minification.
if (HttpContext.Current.IsDebuggingEnabled) {
BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear());
}
}
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 want to use the ASP.NET MVC 4 Bundling and Minification feature, please assume that we run the debug mode so nothing is bundled, but each reference is simply rendered to single tags. Locally everything works fine:
Example
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
}
When calling #Scripts.Render("~/bundles/jquery") from the view now, a tag similar to this is generated:
<script src="/Scripts/jquery-1.8.2.js"></script>
The result is the same if I would just write:
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
But when I deploy everything to a test server in the internet (still using the debug mode), there is some Url rewriting enabled, where I route specific domains or subdomains to specific folders.
For example, if the domain is sub1.example.com then forward to example.com/__sub1__ and in case of sub2.example.com forward to example.com/__sub2__ and so on. When I open sub1.example.com in the browser, there is usually no clue that this forward happens, the Url doesn't change, all Urls remain working and so do references generated using the Url.Content(...) method.
But for some strange reason, the call to #Scripts.Render("~/bundles/jquery") now renders something like this:
<script src="/__sub1__/Scripts/jquery-1.8.2.js"></script>
Please note the "/sub1" part which is the part which shouldn't be generated and never appear somewhere in the rendered html code and leads to a 404 because the url rewrite forward fails.
While...
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
...still renders the correct relative Path to "/Scripts/jquery-1.8.2.js". And i never had other problems with rewriting the Urls like this. And I don't want to get rid of this rewriting.
Obviously, the same applies to style sheets.
Any ideas what I could try?
This is a bug with the current implementation of the script/style helpers, this should be fixed with the 1.1-alpha1 release that should be available shortly(early Oct) as the support for using the VirtualPathProvider registered with ASP.NET has fixed this general class of issue (resolving resource paths correctly).
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.