Use Mircrosoft Ajax minifier to slim down Javascript

This tool is release along with Microsoft Ajax library preview 6, you can download to this place: http://aspnet.codeplex.com/Release/ProjectReleases.aspx? Releaseid = 34488

After downloading and installing the tool, we can see Microsoft Ajax minifier in the program set. For the first use, we recommend that you take a look at Microsoft Ajax minifier documentation.

The installation is very simple, but you need to pay attention to it when using it. This tool is still regarded as Yangchun, and only commands in command-line mode are provided. There is no GUI interface yet, this is also the case. I suggest you first check the reason for documentation. Below we will briefly show you how to use this tool through command-line and msbuild.

Introduction

No matter whether you use any tool, if you have documentation, be sure to watch it. In introduction, we can see that the processing of this tool is divided into four levels:

Level 1: whitespaces and comments)

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

Level 3: Change the name of a region variable to a simple name, hyper-crunching

Level 4: removes unexecuted script content

The above four levels, level 1 ~ 3. You can directly select Level 3 for use. However, if you want to use level 4, we recommend that you check whether the script in this section is actually not executed to avoid other problems.

Command-line mode

First, enable Microsoft Ajax minifier Command Prompt:

According to the file description, we have the following commonly used commands:

-O: Specifies the file name after Minify. The default output level is Level 2 (normal-crunching ).

-H: reduce JavaScript by setting the output level to level 3 (hyper-crunching ).

-A: displays the content of the analysis process on the command-line screen.

Next, let's simply use it. First, I found a hash. the initial content of the JS file is roughly as follows. It has a complete solution and function definition, which is useful to developers, but does not make sense to runtime users:

Let's start experimenting with the following two Commands: 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 to the hash_mini_o.js file through the-O (normal-crunching) command:

Press enter to display the crunching file 'hash. js '... Done.

The results are as follows: the file size ranges from 5 k --> 2 K, and the number of characters ranges from 3891 --> 1699:

Hyper-crunching: ajaxmin-a-h c: \ Inetpub \ wwwroot \ website2 \ hash. js-o c: \ Inetpub \ wwwroot \ website2 \ hash _ mini_a.js

Press enter to print the analysis result on the command-line screen. This is because we use the-a command:

Below are the output files. At first glance, there seems to be little difference, but this is because we use the-H (hyper-crunching) command, therefore, we will find that some region variables are renamed to relatively simple names, such as VAR exists --> var A, so although the file size is still 2 K, however, the number of BITs is 1531, which is less than the previous 1669:

Because this JS file is relatively small, the overall effect is not very amazing (5 k --> 2 K), so let's experiment with jquery's JS file directly:

Jquery1.3.1, with a size of 115 K, changed to 69 K after the-O command and 53 K after the-H command, the effect is really positive.

Msbuild Mode

After talking about the command-line mode, let's continue to explain the msbuild mode. The command-line mode may still make people feel a little tied to their feet, it is best to automatically help us out when the agency is running.

After installing minifier, you can find ajaxmin in the path of program files/msbuild/Microsoft/microsoftajax. tasks file. This is a task file dedicated to msbuild. During project construction, this task will be called for minifier deployment:

Open our web project files (*. csproj, *. vbproj), and add this section before the ending symbol of </Project>:

Reference content is as follows:

1. <Import project = "$ (msbuildextensionspath) \ Microsoft \ microsoftajax \ ajaxmin. Tasks"/>
2. <Target name = "afterbuild">
3. <Itemgroup>
4. <JS include = "** \ *. js" exclude = "** \ *. Min. js; scripts \ *. js"/>
5. </Itemgroup>
6. <Ajaxmin sourcefiles = "@ (JS)" sourceextensionpattern = "\. js $" targetextension = ". Min. js"/>
7. </Target>

The above settings are to inform the project that the alias is ajaxmin during compilation. task is mainly used to find all the * in the directory *. JS file. After completing Minify, name it *. min. JS. After completing the above settings, we will start our project again. At this time, the following picture may appear. Please select "load the project in general mode" and press OK:

Then we add a few JS files to the project as follows:

Next, follow the general usage mode and press "build". At this time, you can see the following results under the project directory. However, these files will not automatically help you add them to the project, this design is also good, because after all these two JavaScript copies are used in the design time, and the other is run time. It is reasonable not to be directly added to the project: