Use Microsoft Ajax Minifier to help your JavaScript thin

Two days ago in Plurk to see 91 elder brother in talking about this tool, a little bit of the rise under a little play, found that it is quite interesting, the following introduction for you to see.

Since the rise of the Web 2.0, the user's need for interactive Web pages is growing, not only requires the use of the interface beautiful, but also want to operate the friendliness of the function with the previous WinForm program, and in order to achieve better operating results, Programmers have to add a lot of new elements to the web design (or to use some of the less-used technology in the past), where Ajax is a popular and well-known technology architecture, and the software manufacturers have also launched the corresponding AJAX framework to help us develop, But Ajax, in addition to the better human machine operations, also brings a lot of JavaScript, as we use more and more AJAX features, Web pages need to reference the number of JavaScript file is also more and more, the volume is also increasing, These changes will reflect the efficiency of the user's Web downloads and JavaScript execution.

If you use the ASP.net AJAX, the basic JavaScript volume is about 200-300KB, and if you use Ajaxpro, the basic JavaScript is about 80kb,javascript, though it will be cache, but for the users, The experience of the first operation will be affected by the number of times.

Because the web traffic is too large, JavaScript is too fat, and so on, in fact, Microsoft has provided some good programs, the following three to do with, you can get very good results:

IIS Web page compression: IIS static files (HTML, CSS, JS ... ), dynamic files (ASP, aspx ...). ) to compress, can greatly reduce the Web page traffic, compression ratio set to the highest, about the flow can be pressure to remain about 30%.

Doloto Script Analysis: Responsible for analyzing execution scripts, downloading only the necessary script content to the client, and moving to the server to get the necessary parts as client side needs, to reduce unnecessary traffic.

AJAX minifier:javascript Slimming Tool, you can remove JavaScript unnecessary characters, including white space, newline, symbols and regional variables, such as the name, can directly let our JS file into a new runtime version.

This article mainly aims at the Ajax Minifier to do the explanation.

AJAX Minifier

This tool was released as Microsoft Ajax Library Preview 61 and can be downloaded to this location: http://aspnet.codeplex.com/Release/ Projectreleases.aspx? releaseid=34488

After downloading and installing, we can see the Microsoft Ajax Minifier in the Assembly, and for the first time it is recommended that you look at the Microsoft Ajax Minifier documentation.

Installation is very simple, but the use of a little attention, this tool is still in the spring, only provide the operation of the command-line mode, there is no GUI use interface, which is also the front I suggest you first look at the documentation of the plateau, Below we will simply take a look at how to use this good tool through command-line and MSBuild.

Introduction

Regardless of the use of any tool, if there is a documentation, please be sure to watch, in introduction we can see that the processing of this tool is divided into four levels:

Level 1: Removal of whitespace (whitespaces) and annotations (comments)

Level 2: Remove unwanted semicolons (semicolons) and curly braces (curly-braces), hereinafter referred to as normal-crunching

Level 3: Change the name of the zone variable, and change the name to a simpler name, hereinafter referred to as hyper-crunching

Level 4: Remove script content that is not executed

Above four levels, level 1~3 can be directly selected to 3来 use, but to use level 4, it is recommended that you confirm whether the script is really not executed, so as not to derive other problems.

Command-Line mode

First we open the Microsoft Ajax minifier Command Prompt:

According to the documentation, we have the following several more commonly used directives to use:

-O: Specifies the file name after Minify, and the default output is the result of Level 2 (normal-crunching).

-H: The result of a hyper-crunching of JavaScript, with a preset output rating of Level 3 (a).

-A: Displays the contents of the analysis process on the command-line screen

Let's start with a simple one, first I find a hash.js file, its beginning content is roughly as follows, there are complete annotations and function definitions, which is useful for developers, but not for the runtime users:

Let's start experimenting with the following two instructions normal-crunching and hyper-crunching:

Normal-crunching:ajaxmin c:\inetpub\wwwroot\website2\hash.js–o C:\inetpub\wwwroot\WebSite2\ Hash _mini_o.js

Convert the Hash.js file through-O (normal-crunching) instructions to hash_mini_o.js file:

Press ENTER to display crunching file ' hash.js ' ... Done.

The following is the result of the turn, file size from 5k-->2k, the number of characters from 3891-->1699:

Hyper-crunching:ajaxmin–a-h c:\inetpub\wwwroot\website2\hash.js–o C:\inetpub\wwwroot\WebSite2\ Hash _mini_a.js

When you press ENTER, it prints the results of the analysis on the command-line screen because we use the-a instruction:

The following is the output file, at first glance seems to differ little, but this because we use H-(hyper-crunching) instructions, we will find that some of the regional variables are renamed to a relatively simple name, such as: Var Exists-->var a, So the size of this file is still 2K, but the number of bits is 1531, less than the previous 1669:

Because this JS file is relatively small, so the whole effect does not make people feel particularly amazing (5k-->2k), so the following we directly take jquery js file to test it:

jquery1.3.1 version, the size of 115K, after the order of-O to 69K, after-h instructions to become 53K, the effect of the good really very hot.

MSBuild mode

After finishing the command-line mode, let's go on to explain MSBuild mode, how many people feel tied up through the command-line mode, and it's best to automatically help us out when the department is posted.

When we put the Minifier in this program files/msbuild/microsoft/ Microsoftajax can be found under the path of a ajaxmin.tasks file, this is an MSBuild-specific task file, in our project build will marine call this task to Minifier Marine called:

Open our Web project file (*.csproj, *.vbproj) and add this paragraph to the end of the </Project> symbol:

The following are the referenced contents: <import Project="$ (msbuildextensionspath) \microsoft\microsoftajax\ajaxmin.tasks" /> <target Name="Afterbuild"> <ItemGroup> <js Include="**\*.js" Exclude="**\*.min.js"; Scripts\*.js " /> </ItemGroup> <ajaxmin sourcefiles="@ (JS)" sourceextensionpattern="\.js$" targetextension =". Min.js" /> </Target>

The above setting is to inform the project compile to marine called Ajaxmin.tasks, the main work is to find out all the *.js files in the directory, after the minify name is *. Min.js, after we have finished setting up our project, we may have the following screen, please select "Load Project in general" and press OK:

Then we randomly add a few JS files in the project, as follows:

Then follow the general usage pattern, press the build, this time to the directory of our project can see the following results, but these files will not automatically help you add to the project, this design is also good, because after all, this two JS one is in designing time, the other is run time use, It is reasonable not to be directly involved in the project:

Conclusion

The use of this tool is roughly as described above and I hope it will help you.