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());
}
}
Related
I have made changes to my css on my MVC5 project that are working as intended on my local version but when I deploy to Azure the changes are not working.
I have tried creating a min.css file but this did not work
Have you done a hard refresh and pulled a copy of the stylesheet from the server to see if the changes you made are actually there? Http caching could be the culprit depending on how you're packaging your CSS.
Next, check the page source to make sure that your page is actually requesting the stylesheet you think it is. For example, if your site is requesting styles.min.css but you only made changes to styles.css and didn't create a new minified version, that'll cause problems.
Third, I'd check the elements that do not have the styles you're expecting and trace the styles with something like Chrome Developer Tools to ensure that your styles aren't being overridden in a way you're not expecting.
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;
I am struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
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 have an MVC 4.5 project that has most of the UI logic organized in jQuery plugins. I want to protect my code by minification and bundling (While I understand that minification will only do so much as far as protection, it's better than leaving formatted and documented source files on the server.)
Ideally, I want my dev server to work as is -- files are non-minified and separated. But, when I deploy to the production server, I want the source files to be removed and only minified bundles to be available. Also note, on many occasions my jQuery plugins load other plugins from JavaScript code (I use head.js), so I cannot use #Script.Render for that.
What technologies do I use -- built-in MVC bundling, SquishIt, Bundler or do I need to resort to MSBuild and Microsoft Axaj Minifier? To recap, I want to remove source JS files and just be left with minified bundles in production, and, preferably, find a way to not change head.js references based on whether files are minified or not.
Thanks for your advice.
Just thought I respond with what I ended up doing here:
To recap: I wanted to obfuscate my source files with minification while not exposing the source JS files in production. I also wanted for head.js to resolve source file URLs to bundle URLs:
Put all non-minified javascript files in a folder viewable only to Admin role
Used bundling built-in to ASP.NET MVC 4.5 to generate bundles
Pointed my head.js tag to an MVC controller that returned head.js code + a javascript array with an x-ref between raw URLs and bundle URLs (available from BundleTable static object)
Bundling occurs outside of ASP.NET membership, so bundles are generated and available to anonymous users even though the source files are in the folder only accessible by Admin. Then, the trick of dynamically augmenting head.js code with server-side generated bundle URLs takes care of calling bundles from JS files.