Minimize CSS and JavaScript files with squishit

Squishit is a component that easily compresses and merges CSS and JavaScript files. It also uses dotless to process CSS. Its dependent components are:

Dependencies

ID
Version range

Yuicompressor. net
(≥1.7.0.0)

Dotless
(≥1.2.2.0)

Ajaxmin
(≥4.46.4422.26284)

Jurassic
(≥2.1.1)

But don't worry, the dependency will be automatically installed. You can use command-line to install it.

PM> install-package squishit-version 0.8.6

It is easy to use. Modify web. config, where debug is false.

<CompilationDebug="False"Targetframework="4.0">
 

View in Asp.net MVC 3 can be used in this way. Finally, a file named combine starting with JS is generated before merging.

 
@Html. Raw (Bundle. JavaScript (). Add ("~ /Scripts/jquery-1.5.1.js"). Add ("~ /Scripts/jquery. Validate. js"). Add ("~ /Scripts/jquery. Validate. unobtrusive. js"). Render ("~ /Scripts/combined #. js"))
 

Through firebug, we can see that there is only one JS request. This file is merged with other files.

HTTP: /localhost: 6060/scripts/combined4a287ff65bfd05f0b0bc2f292d0c8258. js

Compared with the previous three JS requests, only one request is needed and compressed.

The CSS file can be as follows:

 
@Html. Raw (Bundle. CSS (). Add ("~ /Content/site.css"). Add ("~ /Content/risksite.css"). Render ("~ /Content/combined#.css"))
 

 

The last page only requests http: // localhost: 6060/content/combinedcbbf63b8c0ef232103c23c953c336d54.css

Similarly, this file merges other CSS files and compresses them.

If you want to avoid generating these files on the disk, let them be generated at runtime. Taking CSS as an example, some extensions are required. The official website has already started and will be available in the future.

In global. asax:

Protected voidApplication_start (){Arearegistration. Registerallareas (); registerglobalfilters (Globalfilters. Filters); registerroutes (Routetable. Routes );Bundle. CSS (). Add ("~ /Content/site.css"). Add ("~ /Content/risksite.css"). Ascached ("Main","~ /Security/CSS/main");}
 

 
Then, create a basecontroller and add two actions, similar to the following:
 

 Public class  Basecontroller : Controller {Public  Actionresult JS ( String ID ){ // Set max-age to a year from now Response. cache. setmaxage ( Timespan . Fromdays (365 )); // In release, the cache breaker is appended, so always return 304 not modified Response. statuscode = 304; Return Content ( Bundle . JavaScript (). rendercached (ID ), "Text/JavaScript" );} Public Actionresult CSS ( String ID ){ // Set max-age to a year from now Response. cache. setmaxage ( Timespan . Fromdays (365 )); // In release, the cache breaker is appended, so always return 304 not modified Response. statuscode = 304; Return Content ( Bundle . CSS (). rendercached (ID ), "Text/CSS" );}}

 

Inherit the basecontroller from the actual controller:
 

Public classSecuritycontroller:Basecontroller{//...}
 
 
In the view, the mvcrendercachedassettag method is changed:
 
 
 
 
 
@Bundle. CSS (). mvcrendercachedassettag ("Main")
 
 
 
 

If you are interested, you can also write a razor extension, similarCodeLike this
 
 

// Rzr. cshtml
 
@ HelperCSS (StringKey ){@Bundle. CSS (). mvcrendercachedassettag (key )}@ HelperJS (StringKey ){@Bundle. JavaScript (). mvcrendercachedassettag (key)} // In a view...@Rzr. CSS ("Main")@Rzr. js ("Main")
 
 
 
 
 
Run the page:
 
 
 
 
Http: // localhost: 6060/security/loginwithmodel
 
 
 
 
 
In HTML, display:
 
<LINK rel = "stylesheet" type = "text/CSS" href = "/security/CSS/Main? R = cbbf63b8c0ef232103c23c953c336d54 "/>
 
 

This is a dynamically generated CSS. It is as simple as it is. You can modify components as needed.
 
 
Hope to help your web development. You may be interested inArticle:

 
 
Asp.net uses httphandler to optimize CSS style files
Asp.net uses httpmodule to compress and delete blank HTML requests
 
 
 
 
 
 
 
 

Author: Petter Liu
 
 
Source: http://www.cnblogs.com/wintersun/
 
 
The copyright of this article is shared by the author and the blog Park. You are welcome to repost this article. However, you must retain this statement without the author's consent and provide a clear link to the original article on the article page. Otherwise, you will be held legally liable.
 
 This article is also published in my independent blog-Petter Liu blog.