Squishit-JavaScript and CSS Compressors

I have updated my blog in an event, mainly because my work was a little busy during this time, and I am helping a friend in my spare time, so I didn't get in touch with new things. When I got online today, an old colleague (the master I just got out of work) sent a website saying that I had something nice to watch. So I looked at it and found something good, it also solves a small problem that I was thinking about before. It is a C #. NET component. Because the materials are in e-files, you can read them in a familiar way and then write a test demo. This article Article Recording the learning results is actually quite simple --!

First, let's see where to use this component. PleaseClick hereJump to the component... when I sent this article, the latest version is 0.7.0, So download this version! It is a compressed package. After decompression, you can see the following (the pointer selected is the component we want ):

Next we will create a web project to test it. Here we use vs2010 to create an ASP. net4.0 web project. Let's take a look at what we need:

I have used two JS files and two CSS files. The jquery-1.4.1.jsand site.css files are automatically generated when the project is created. The contents of these two files are not compressed. Now, the files are applied to the page (here I select the parent site. in the master), introducedCodeIt is quite simple, as follows: HTML code?

1234

< Link Href = "Styles/site.css" REL = "Stylesheet" Type = "Text/CSS" /> < Link Href = "Styles/stylesheet.css" REL = "Stylesheet" Type = "Text/CSS" /> < Script SRC = "Scripts/JScript. js" Type = "Text/JavaScript" > </ Script > < Script SRC = "Scripts/jquery-1.4.1.js" Type = "Text/JavaScript" > </ Script >

Next, run the website and access default. ASPX page (this page uses the motherboard site. master). After page loading is complete, let's see how many scripts and style sheets are loaded on the page. Chrome is used, as shown below:

I useRed boxThe box is displayed! It can be calculated that the four files are169 KMore.

In this case, squishit is used to introduce JS and CSS files. framework. DLL is introduced into the project (right-click the project header in the solution window-add reference ......), remove the four labels in the upper parent board, and replace them with the following code to introduce the file: C # code?

123456789101112

<% = Squishit. Framework. Bundle. CSS () . Add ( "~ /Styles/site.css" ) . Add ( "~ /Styles/stylesheet.css" ) . Render ( "~ /Styles/tiu_#.css" ) %> <% = Squishit. Framework. Bundle. JavaScript () . Add ( "~ /Scripts/jquery-1.4.1.js" ) . Add ( "~ /Scripts/JScript. js" ) . Render ( "~ /Styles/Tiu _ #. js" ) %>

The above code is quite clear, so I won't talk about the syntax or anything. When I access the page again, I will find that scripts and style sheets work normally, in Chrome's debugging tool, we found that the file size remains unchanged. At this point, this component has only completed the function of introducing JS and CSS files. The focus is on the compression function! So modify the code as follows: C # code?

1234567891011121314

<% = Squishit. Framework. Bundle. CSS () . Add ( "~ /Styles/site.css" ) . Add ( "~ /Styles/stylesheet.css" ) . Forcerelease () . Render ( "~ /Styles/tiu_#.css" ) %> <% = Squishit. Framework. Bundle. JavaScript () . Add ( "~ /Scripts/jquery-1.4.1.js" ) . Add ( "~ /Scripts/JScript. js" ) . Forcerelease () . Render ( "~ /Styles/Tiu _ #. js" ) %>

This time we will not only focus on the file size, but also the file name, as shown below:

We can see only one JS file and CSS file, and the file size is much smaller. This is the compression function of this component! OpenSource code, You can see these two files, the file name is a bit strange --! We can see the following improvements:

1. The size of these two files is74.28 KRemember the four files above,169 K, We can find that the size after compression is less than half;
2. The four files are changed to two, that is, to the serverHalf of the requests;

This article is just a simple record of the use of components. As for some details, I will not introduce them. I will go over it and write it into another article ^_^. Using this component, we can write good-looking code in the style of our code, but when using JS or CSS, we do not have to worry about File compression, more importantly, you do not need to maintain the code of two versions (compressed and uncompressed). This is what I mentioned at the beginning of this article, "solved a small problem I was thinking about before "!

The demo is extremely simple, but it still feels complete when sending the source code. If necessary, pleaseClick to download
My colleague sent me the website address is this: http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher