Microsoft Ajax Minifier helps you reduce Javascript size

Since the rise of Web 2.0, users are increasingly demanding webpage interaction, which requires not only the appearance of the interface, but also the friendliness of the operation functions, in order to achieve better operation results, programmers have to add many new elements to the web design (or widely used technologies that were rarely used in the past ), among them, AJAX is a very popular and widely known technical architecture, and many software manufacturers have successively released the corresponding AJAX Framework to assist us in development, however, in addition to better human-machine operations, AJAX also brings about a large amount of Javascript. As we use more and more AJAX functions, the number of Javascript files for reference on webpages also increases, these changes will reflect the efficiency of users' webpage downloads and Javascript Execution.

If you use ASP. net ajax, the basic Javascript size is about-kb. If you use AjaxPro, the basic Javascript size is about 80 KB. Although Javascript will be cached, the first operation will affect the user experience.

Because the webpage traffic is too large, Javascript is too fat, and so on, in fact, Microsoft has provided some good solutions, the following three items can be matched, you can get very good results:

IIS web page compression: static IIS files (html, CSS, JS ...) , Dynamic files (asp, aspx ...) Compression can greatly reduce web page traffic. When the compression ratio is set to the highest, the traffic can be compressed to about 30%.

DOLOTO script analysis: analyzes the executed script, downloads the necessary script content to the client, and dynamically obtains the necessary content from the server as the client needs to reduce unnecessary traffic.

AJAX Minifier: Javascript slimming tool that removes unnecessary characters from Javascript, including blank spaces, line breaks, symbols, and Region variable names, we can directly turn our JS file into a brand new runtime version.

This article mainly describes AJAX Minifier.

AJAX Minifier

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:

Address: http://www.chinaz.com/Program/.NET/102O61142009.html