I'm a little confused as to how MVC handles CSS and Javascript, and I have a few questions.
Whenever I create a default MVC (5) application, I see that there are already a number of CSS and Javascript libraries added, with both normal and minified versions.
When I look at the BundleConfig class, I see that the regular files are bundled together, but the minified versions are not.
When are the minified versions actually used? When I debug the site, or even deploy it to a server, I never see these being used. Is this something I have to change myself, or is there a setting for this?
Also, do I need to keep the regular and minified versions of these files in sync, or is this something MVC can do automatically?
Thanks
Bundling
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine
or bundle multiple files into a single file. You can create CSS,
JavaScript and other bundles. Fewer files means fewer HTTP requests
and that can improve first page load performance.
Minification
Minification performs a variety of different code optimizations to
scripts or css, such as removing unnecessary white space and comments
and shortening variable names to one character.
Your Question ?
When I look at the BundleConfig class, I see that the regular files
are bundled together, but the minified versions are not.
Answer :
You don't need to include minified versions into bundle.B'cos bundling itself does this (minification) at the time when your app's status is release.By default Debug mode will use non minified version.
Your Question ?
When are the minified versions actually used? When I debug the site,
or even deploy it to a server, I never see these being used. Is this
something I have to change myself, or is there a setting for this?
Answer :
Minified version will use at the time app is on production (or release mode).
You don't need to do anything here.It does automatically when you change the App's status as release.
Your Question ?
Also, do I need to keep the regular and minified versions of these
files in sync, or is this something MVC can do automatically?
Answer :
You don't need to do anything here.It does automatically by the framework.
Important Note :
You don't need to add minified files into bundles.B'cos bundled files will be automatically minified when app status is on release mode.Please read below thread for more info.
Bundle vs Minification,Which one is the best
By default, if your app is built with Debug option, bundling and minification takes unminified versions. If site is built in Release mode, minified versions of files are taken, where available.
On top of that you can enforce minification yourself by having
BundleTable.EnableOptimizations = true;
in your BundleConfig class. This enables minification for all the bundles for you. To have this minification only in releases I usually do compiler condition:
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
And it is very recommended to read the documentation already linked in comments
Related
I just had my first hour with the built in support for grunt and bower in VS 2015 an I am wondering if the the existing bundling and minification support supplied by Styles.Render and Scripts.Render together with RegisterBundles overlaps with bower / grunt.
Does it make sense to use both in conjunction or does it make more sense to just switch over to bower / grunt?
As far as I know, the Bundling and Minification is no longer available on ASP.NET 5, based on this and this SO item.
I suppose if you can use NPM with VS2015 on a non .NET5.0-targeted project, you could potentially use either, or even both methods. But why would you use both and create inconsistency (and possibly confusion).
Having said that, Web Essentials 2015 (VS Extension) seems to also have its own bundling and minification option. But I'm not sure if I'd favour this approach.
Well, you could go either way of course, as their features are quite similar. At the moment, one benefit of System.Web.Optimization is that if you change a file's contents, you don't have to do anything. With Grunt/Gulp, you need to do a rebuild (unless you make it a part of your project's build steps). Another thing System.Web.Optimization gives you is a unique hash for the bundled files. This ensures that clients won't use a cached, outdated version of your bundle.
However, one thing to consider is that Microsoft is rebuilding ASP.NET and in that new version, Bower/Grunt/Gulp have a firm place. As far as I can tell, the new ASP.NET version by default enables bundling through Grunt/Gulp, not through some package, although it is still in beta and thus it might change.
What are the differences between System.Web.Optimization.Bundle and the bundling operation in WebEssentials Visual Studio plugin?
I mean not only the final result which should be pretty much the same, but also the internals, esp. the differences (if any) in both Debug and Release mode.
And, finally, what do I gain and what do I loose choosing one or another?
As we know System.Web.Optimization.Bundle is mainly used for bundling the js or css files to reduce page size or loading issues but web Essentials is a collection of (mostly) web-related enhancements to Visual Studio.
It includes lots of new IntelliSense completions (especially for CSS), new BrowserLink features, automatic JSHint for Javascript files, new warnings for HTML and CSS, and many other features. Any web-related functionality you want to add should probably go here.
In details if you want to check then below links might be useful.
For Bundling and manification
https://learn.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification
For Web Essential
https://blogs.msdn.microsoft.com/mvpawardprogram/2013/11/05/making-web-development-wonderful-again-with-web-essentials/
I use both approaches time to time. The result is almost the same (size of output files, compile time etc).
System.Web.Optimization. You maintain functionality through *.cs and *.cshtml files.
Web Essentials. You maintain functionality through context menu and config accumulated in .json(xml) files.
But you can not use System.Web.Optimization approach if you develop static html page (no server side at all)
I've been learning about the various ways of content optimization for websites for months now, however I'm still confused about what's the right way of doing so e.g. which 'optimization workflow' results in what effects.
ASP.NET MVC provides its own optimization framework through the 'Microsoft.Web.Infrastructure' package. With that, I can define bundles and minification strategies directly in code on request or when the application starts. However, since my style files are written in less, I need to compile them beforehand, which might slow down the overall application start process, so I feel it might be better to compile those during the build process of the application. But then again, most stylesheet compilers allow to bundle and minimize directly, so why not doing anything there?
LESS files should be compiled when the application compiles
CSS files should be bundled to reduce the amount of needed client requests
CSS files should be minimized to reduce traffic and overall page content size
So, what's the suggested way of accomplishing this?
Compile LESS files on build (with e.g. dotless)
Deploy application to server
Bundle and minify on request using optimization bundles?
When does this bundling and minification happen in the ASP.NET lifecycle? On the first start of the web application? On every request?
Bundling and minification happens on application start.
By default the bundle is created on the first request and then cached on the server. The cached version is then used for all other requests.
The bundling and minification occur at the start of the web application. That is where we specify the process.
Some of the tools allow you to do it explicitly, in such cases we load the .min.js files directly.
When we create a min.js using any tool, the source and minified files are different. These are mapped through a map file.
As we update the source files during development, there are chances that the min.js files are not updated when the source .js files are changed. This issue is more prominent when the files are source controlled. In such a scenario during deployments, it is common to find that the changes in the source machine aren't reflecting in the deployment.
The best thing for bundling and minification would be to adopt the Optimization framework provided by ASP .NET, this does the job dynamically unlike other external tools.
When compilation debug = true it skips the process and loads the original files without bundling, when it is false, the framework bundles all the specified JS and CSS files and deploys it to the server.
I hope this answers your question.
When you add a script bundle and have something like:
bundles.Add(new ScriptBundle("~/bundles/base.scripts").Include(
"~/Scripts/jquery-1*"));
It loads up the raw Jquery version and the minified version. Those files are both in the Scripts folder so I assume the asterisk is doing exactly what you tell it.
Is there a way to have only the minified version render when in debug=false mode and the raw version in debug=true?
Or is it down to actually specifying the exactly files you want instead of using the asterisk?
Regards,
Jacques
This should be happening automatically via the BundleCollection's FileExtensionReplacementList which should be selecting the .min version of the file when debug=false. The default templates when you create a new project should be using this functionality as well.
Although this question is now over a year old, in case someone stumbles across it in need of help on the same problem, Bundling introduces the {version} wildcard which uses a regular expression to look for a typical version number pattern (such as 1.9.1) so that when you update a package manually or via NuGet you don't have to go and change your Bundles configuration.
It will also be smart enough to select from files named .min.js and .js - using the former in release configurations and the latter in debug, exactly what the OP is after.
For ASP.NET MVC 4, this means with a debug configuration, the file
jquery-1.7.1.js will be added to the bundle. In a release
configuration, jquery-1.7.1.min.js will be added. The bundling
framework follows several common conventions such as:
Selecting “.min” file for release when “FileX.min.js” and “FileX.js” exist.
Selecting the non “.min” version for debug.
Ignoring “-vsdoc” files (such as jquery-1.7.1-vsdoc.js), which are used only by IntelliSense.
See Bundling and Minification and {version} wildcard in MVC4 Bundle
Word of warning though, if you have both jQuery-1.9.1.js and jQuery-1.10.2.js in the directory (for example) then both will be matched and added to the bundle - something that obviously is not desirable.
Note also that the minified version of the file must be named file.min.js, not file-min.js or min.file.js for this to work. The YepNope library for example is named yepnope.1.5.4-min.js when you get it via NuGet which means both this and the unminified version are added to the bundle.
For performance reasons an MVC app should have compilation debug='false' set in its web.config.
What benefits does having it set to 'true' during development give? I know that it 'inserts debugging symbols into the compiled page' but what is that for?
Check out this quite interesting link (very old, but still pertaining), which tries to explain in more detail the workings of either compilation mode, or, at least contrast between them well.
In an attempt to directly answer your question regarding what debugging symbols are used for - these give extra information about the compiled code and allow for interrogation of the executing code-base when a debugger is attached; allowing you to step through the source, for instance, as the binary can now be mapped back to it's location in the source file, variable names etc.
This is used for the code that is compiled on the fly (such as aspx and ascx pages) and will instruct the compiler how to compile the files.
Rest of the files such as models, global.asax, etc will be compiled to bin folder.