Minification of CSS and Javascript in the ASP.NET Website Project
Everybody knows about minimizing javascript and css. Well, if someone 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 important for Internet sites, which at the first visit of a user should please him with their performance. But our project, firstly, works in the local network, and secondly, it is used on the same computers every day, so for a long time we didn’t think at all about optimizing scripts and styles. Until they began to work closely with ExtJS.
The created page with all the 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 the page loads (initialization of scripts, ExtJS, etc.).
As it turned out, despite the customer's local network and frequent work with the same pages (there should be built-in caching in the browser), sometimes there are problems with loading pages. Therefore, it was decided to reduce the number of requests to the server and work on the overall performance of ExtJS in IE8.
')
To minify scripts, first downloaded the Google Closure Compiler , as one of the most popular, and the corporation of good will not do bad ...
Put the file compressor.jar in the folder with the scripts. To run it, I had to install java. I made a startup bat file with two commands, the last of which just makes a delay of 10 seconds so that you can see the possible errors and close the command line window yourself. This is how it 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):
Everything is simple and elegant, I spent about five minutes. The cd% 0 \ .. \ command at the beginning of the file is needed so that further execution of commands takes place inside the directory in which the .bat file itself is located, and not from the default directory after the command line is started.
But then the idea arose to minimize not only JS, but also CSS files, and Google Closure, alas, does not know how to do this. Therefore, I decided to redo everything on YUI Compressor, about which there are a lot of reviews, and it also compresses CSS.
To merge all the project files, a batch file was written for a much larger volume, because this YUI is not able to perceive several files in a row at once — it can be fed only one file at a time. So, we first need to blind the files into one temporary file with the copy command, and only then compress it with a compress.
By the way, the important point is that all javascript files to be merged should have a semicolon at the end of the file, and preferably with a transfer to the next line. In general, any operators must end with a semicolon, and the resharper is indignant when he sees our javascript.
This is what the compressor startup file currently looks like. As you can see, CSS minification lines are commented out due to the specifics of our project. In fact, there are a lot of subtleties in CSS minification, and merging them into one file is no easy task:
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 ... each time running the script.
The fact is that we have two branches in SVN - working (DEV) and release. Every time before uploading a version to the server, we perform a merge of all (well, or the necessary part) changes, build and only then (if everything is fine) commit. And it is necessary, firstly, not to forget to constantly perform this batch file before committing to release, and secondly, to monitor all developers, so that they also do not forget to do it.
And here Hook Scripts in TortoiseSVN come to our rescue!
In the SVN client settings, go to the Hook Scripts tab and select the folder of our project and the batch file there. In the Hook Type options, select “Start-Commit Hook“ to start the script before the commit window is displayed.
Setting start minification before commit
Voila, everything works and no need to follow anyone!
There are, of course, a lot of pooling and minification tools built into visual studio, but they also need to be installed on each machine, and there are also many subtleties in them. 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.
The created page with all the 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 the page loads (initialization of scripts, ExtJS, etc.).
As it turned out, despite the customer's local network and frequent work with the same pages (there should be built-in caching in the browser), sometimes there are problems with loading pages. Therefore, it was decided to reduce the number of requests to the server and work on the overall performance of ExtJS in IE8.
')
To minify scripts, first downloaded the Google Closure Compiler , as one of the most popular, and the corporation of good will not do bad ...
Google Closure Compiler
Put the file compressor.jar in the folder with the scripts. To run it, I had to install java. I made a startup bat file with two commands, the last of which just makes a delay of 10 seconds so that you can see the possible errors and close the command line window yourself. This is how it 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, I spent about five minutes. The cd% 0 \ .. \ command at the beginning of the file is needed so that further execution of commands takes place inside the directory in which the .bat file itself is located, and not from the default directory after the command line is started.
But then the idea arose to minimize not only JS, but also CSS files, and Google Closure, alas, does not know how to do this. Therefore, I decided to redo everything on YUI Compressor, about which there are a lot of reviews, and it also compresses CSS.
YUI Compressor
To merge all the project files, a batch file was written for a much larger volume, because this YUI is not able to perceive several files in a row at once — it can be fed only one file at a time. So, we first need to blind the files into one temporary file with the copy command, and only then compress it with a compress.
By the way, the important point is that all javascript files to be merged should have a semicolon at the end of the file, and preferably with a transfer to the next line. In general, any operators must end with a semicolon, and the resharper is 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 what the compressor startup file currently looks like. As you can see, CSS minification lines are commented out due to the specifics of our project. In fact, there are a lot of subtleties in CSS minification, and merging them into one file is no 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 they immediately fall out of our association (by the way, most of them are already minified).
- Secondly, in the CSS files there can be
@import. This is hell. - Thirdly, you can also 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 have many such files and the performance gain will be small. Therefore, we decided to defer CSS minification for now. (It was possible to stay on 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 ... each time running the script.
Automation of minification with commit to release
The fact is that we have two branches in SVN - working (DEV) and release. Every time before uploading a version to the server, we perform a merge of all (well, or the necessary part) changes, build and only then (if everything is fine) commit. And it is necessary, firstly, not to forget to constantly perform this batch file before committing to release, and secondly, to monitor all developers, so that they also do not forget to do it.
And here Hook Scripts in TortoiseSVN come to our rescue!
In the SVN client settings, go to the Hook Scripts tab and select the folder of our project and the batch file there. In the Hook Type options, select “Start-Commit Hook“ to start the script before the commit window is displayed.
Setting start minification before commit
Voila, everything works and no need to follow anyone!
There are, of course, a lot of pooling and minification tools built into visual studio, but they also need to be installed on each machine, and there are also many subtleties in them. 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.
Source: https://habr.com/ru/post/202102/
All Articles