Minifying and Combining Files in .Net

Minifying and combining files in .net

We have done something similar with several ASP.NET web applications. Specifically, we use the Yahoo Yui compressor, which has a .NET library version which you can reference in your applications.

The approach we took was to generate the necessary merged/minified files at runtime. We wrapped all this logic up into an ASP.NET control, but that isn't necessary depending on your project.

• The first time a request is made for a page, we process through the list of included JS and CSS files. In a separate thread (so the original request returns without delay) we then merged the included files together (1 for JS, 1 for CSS), and then apply the Yui compressor.
• The result is then written to disk for fast reference in the future
• On subsequent requests, the page first looks for the minified versions. If found, it just serves those up. If not, it goes through the process again.

As some icing to the cake:

• For debug purposes, if the query string ?debug=true is present, the merged/minified resources are ignored and the original individual files are served instead (since it can be hard to debug optimized JS)

We have found this process to work exceptionally well. We built it into a library so all our ASP.NET sites can take advantage. The post-build scripts can get complicated if each page has different dependencies, but the run-time can determine this quite easily. And, if someone needs to make a quick fix to a CSS file, they can do so, delete the merged versions of the file, and the process will automatically start over without need to do post-build processing with MSBuild or NAnt.

Combining and minifying JS and CSS in ASP.NET MVC

You can use bundle and minification nuget package. Bundling and Minification

At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"

Example here:

Using Web Optimization with MVC 3

Concatenate and minify JavaScript on the fly OR at build time - ASP.NET MVC

In the appendix of Professional ASP.NET 3.5 Scott Hanselman talks about Packer for .NET. This will integrate with MSBuild and pack javascript files for production deployments etc.

minify javascript file at runtime in .net Web forms

You are refering to what Microsoft calls bundling and minification. You can find a detailed description here: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Does the ASP.net bundler automatically minify files?

The Asp.Net bundler does bundle all scripts in the same bundle into one single file, listed in the order they are defined in the bundle. This single file is then minified and delivered to the client.

If you include both the normal and minified versions of a script in your script directory, the bundler will automatically deploy the full script during debugging sessions and the minified version during production. You should avoid referring to the minified versions of your scripts in the bundle configuration, unless you want the minified version deployed to your debug sessions.

Combine Javascript/CSS into one file or two for better optimization

Well, there are two main schools of thought.

The first, is reduce the number of HTTP requests as much as possible. This would say to reduce ALL CSS files down to one monster. It's better to download 400kb once, than multiple 50kb files. (and the same for JS).

The other is to combine where necessary, but no further. If you have 100kb of CSS that's only needed on one section of the site, there's no reason to slow the rest of the site down for your users. This is especially true for JS since there are lots of sites that include jQuery (for example) on every page because 10% of the site uses it.

My take on it is a combination of the two. If I use code on about 50% of the site or more, I include it in the "master" file. If the code is small (less than 5kb or 10kb), I include it in the master file. Otherwise I split it to separate files.

The whole reason for any of this is to make the user experience better. You could do a giant brute force and load all css and JS in 2 respective files every page load (sure it would be cached). But if the landing page doesn't need 50% of that code, you're needlessly slowing down the page with the biggest impact.

And that's why I believe that the best solution to this problem is to have a human analyze the situation. They can look for duplicates and abstractions. They can look at the needs of the page/site and determine the best scenario. Unless you want to make your program do that (which would be difficult), it's not going to give the best result (but then again, there is a difference between good and good-enough)...

That's my $0.02 anyway...

How to minify and combine Javascript and CSS

There are several convenient options for .NET, for example:

Chirpy

SquishIt

Cassette

And new in ASP.NET 4.5:
Bundling in ASP.NET 4.5

To bundle and minify JavaScript files, can I just concatenate file content then minify?

Everything that is pure javascript (ie you're not concatenating something like coffeescript to a javascript file), and is closed off correctly should concatenate fine. The order that you concatenate the files is important, it should be the same order as your current order for synchronously loaded scripts.

Code not closed off correctly:

file1.js

var ten = 10;
var twenty = 

file2.js

$(document).ready(function() {
    // Do stuff
});

If these files are seperate, file1 will throw an error, but file 2 will run correctly. If you concatenate them:

var ten = 10;
var twenty = 

$(document).ready(function() {
    // Do stuff
});

The error will be thrown and the document ready statements will not be executed. Hopefully there isn't something like that in your code, but you never know.

Combine and Minify Multiple CSS / JS Files

I ended up using CodeKit to concatenate my CSS and JS files. The feature that I find really useful is the ability to do the concatenation upon file save; because it monitors the respective CSS / JS assets. Once I got them properly combined e.g. to 1 CSS and 1 JS files, all other files simply can refer to these 2.

You can even ask CodeKit to do on-the-fly minification / compression.

Disclaimer: I am not affiliated in any way with CodeKit. I randomly found it on the web and it has served as a great tool in my development process. It also comes with good updates since I first used it more than a year ago.

---

Related Topics