CSS and Javascript minification in ASP.NET Website project

Everyone knows about minimizing javascript and css. Well, if anyone does not know, then, in short, this is a reduction in the volume of files due to the removal of comments, markup, line breaks and other things. It is especially relevant for Internet sites, which at the first visit of a user should please him with their performance. But our project, firstly, works on a local network, and secondly, it is used on the same computers every day, so for a long time we did not think at all about optimizing scripts and styles. Until we began to work closely with ExtJS.

The created page with all connected scripts and styles weighs more than 5 MB (about 200 files). The generated DOM tree alone in the HTML code contains more than 500,000 bytes. The user can start working with the system no earlier than 5 seconds after loading the page (initialization of scripts, ExtJS, etc.).

As it turned out, despite the customer having a local area network and often working with the same pages (there should be built-in caching in the browser), sometimes there are problems loading pages. Therefore, it was decided to reduce the number of server requests and work on the overall ExtJS performance in IE8.

To minify scripts, I first downloaded the Google Closure Compiler , as one of the most popular, and the corporation will not do anything good ...

Google closure compiler

I put the file compressor.jar in the script folder. To run it, I had to install java. I made a bat-file for launching with two commands, the last of which only makes a delay of 10 seconds so that you can catch time to see possible errors and close the command prompt window yourself. Here in such a way I merged all the scripts into one file, the weight decreased by about one and a half times (this is the contents of the bat-file):

cd %0\..\
java -jar compiler.jar --js=NavigationJS.js --js=SSSC.js (здесь еще куча файликов аналогичным образом)  --js_output_file=bcr_master.min.js
ping -n 1 -w 100000 192.168.254.254 >nul


Everything is simple and elegant, it took me about five minutes. The cd% 0 \ .. \ command at the beginning of the file is needed so that further execution of the commands takes place inside the directory in which the .bat file is located, and not from the default directory after starting the command line.

But here the idea arose to minimize not only JS, but also CSS files, and Google Closure, alas, is not able to do this. Therefore, I decided to redo everything on the YUI Compressor, about which there are a lot of reviews, and it also compresses CSS.

YUI Compressor

To combine all the files of the project, a batch file of already much larger volume was written, because this YUI does not know how to perceive several files at once - it can only be fed one file at a time. So, first we need to create files into one temporary file with the copy command, and only then compress it with a compressor.

By the way, an important note - all javascript files to be merged must have a semicolon at the end of the file, and preferably with a wrap to the next line. In general, any operators must end with a semicolon, and the resolver is fiercely indignant when he sees our javascript.

cd %0\..\
copy /b .\..\..\Scripts\JSON.js + (еще много файликов)  + Bids.js combined.js
java -jar yuicompressor-2.4.8.jar combined.js --type js -o combined.min.js --charset cp-1251
copy /b combined.min.js +  (еще много уже минимизированных файликов)  + .\..\..\Scripts\jquery\plugins.fileupload.min.js mbcrfull.min.js
del combined.min.js
del combined.js
::copy /b .\..\..\Styles\MPMessage.css +  (еще много файликов)  + .\..\..\BCR\Styles\Kondor.css combined1.css
::java -jar yuicompressor-2.4.8.jar combined1.css -o .\..\..\BCR\Styles\mbcrfull.min.css --charset cp-1251
::del combined1.css
::copy /b .\..\..\Styles\jquery\ui.all.css + (еще много файликов) + .\..\..\Styles\jquery\jqueryslidemenu.css combined2.css
::java -jar yuicompressor-2.4.8.jar combined2.css -o .\..\..\Styles\jquery\mbcrfull.min.css --charset cp-1251
::del combined2.css
::ping -n 1 -w 10000 192.168.254.254 >nul


This is how the compressor startup file now looks. As you can see, CSS minification lines are commented out due to the specifics of our project. In fact, CSS minification has a lot of subtleties, and merging them into one file is not an easy task:
  • First, you need to carefully monitor the use of relative paths to images. The styles of ExtJS and other libraries are based on relative paths, which means that they immediately fall out of our association (by the way, for the most part they are already minified).
  • Secondly, commands can occur in CSS files @import. This is hell.
  • Thirdly, you can create minified combined styles separately in each of the folders, and then include them in the project, but as it turned out, we don’t get such files so much and the performance gain will be small. Therefore, we decided to postpone CSS minification for now. (You could stop at the Google Closure Compiler in this case)


And now the most interesting thing is that we have a batch file, the combined scripts are generated successfully, it remains to register them in the release version of the project. Everything seems to work, you need to commit .... running the script every time.

Minimize automation when committing to release

The fact is that we have two branches in SVN - working (DEV) and release. Each time before putting the version on the server, we merge all (well, or the right part) changes, build and only then (if everything is fine) commit. And you must, firstly, do not forget to constantly perform this batch file yourself before committing to release, and secondly, monitor all developers so that they do not forget to do it.

And here Hook Scripts in TortoiseSVN come to our aid!

In the settings of the SVN client, go to the Hook Scripts tab and select the folder of our project and the batch file itself there. In the Hook Type options, select “Start-Commit Hook” so that the script runs before the commit window appears.


Setting up the launch of minification before committing

Voila, everything works and no need to follow anyone!

Of course, there are a bunch of built-in visual studio tools for combining and minifying, but they also need to be installed on each machine, and they also have a lot of subtleties. Before that, we used the built-in Composite Scripts method, but it does not have sufficient functionality in comparison with the same YUI or Google closure Compiler.

Also popular now: