How to compress CSS, JS

I checked a lot of methods to compress CSS/JS on the internet, and I feel that it is easy to use Ms. Others, although powerful, are complicated and should be simplified...

After a new web project is created in ASP. net mvc, the bundle functions have been written inCode,But how does one use the bundle compression function in traditional webform projects?The implementation steps are as follows:

1. Create a new project and initialize the project to the following structure for Demonstration:

2. Install extensions through nuget"Microsoft ASP. NET web optimization framework"

Find"Microsoft ASP. NET web optimization framework"Extension

Install this extension and close this window
In this case, a reference named "system. Web. Optimization" will be added to the solution.

3. Modify the Global File and add the bundle resource code.

 Void Application_start ( Object Sender, eventargs e ){  //  In the ApplicationProgramCode that runs at startup Bundletable. Bundles. Add ( New Scriptbundle ( "  ~ /Resource/jquery  " ). Include ( "  ~ /Scripts/jquery-1.4.1.js  "  ));// One virtual path corresponds to one JS FileBundletable. Bundles. Add (  New Stylebundle ("  ~ /Resource/Site  " ). Include ( "  ~ /Styles/site.css  "  ));// One virtual path corresponds to one CSS fileBundletable. Bundles. Add (  New Stylebundle ( "  ~ /Resource/easyuitheme_default  " ). Includedirectory ( "  ~ /Styles/easyuithemes/Default " , "  *. CSS  " , False  ));// One virtual path corresponds to multiple CSS filesBundletable. Bundles. Add (  New Stylebundle ( "  ~ /Resource/easyuitheme_gray  " ). Includedirectory ( "  ~ /Styles/easyuithemes/gray  " , " *. CSS  " , False  ));// One virtual path corresponds to multiple CSS filesBundletable. Bundles. Add (  New Stylebundle ( "  ~ /Resource/easyuitheme_metro  " ). Includedirectory ( "  ~ /Styles/easyuithemes/Metro  " , "  *. CSS  " , False  ));// One virtual path corresponds to multiple CSS files} 

 

The scriptbundle and stylebundle are defined above, which define JS and CSS resources respectively. In each line of code, the previous path isVirtual Path, required "~ /"The following path is a real path.

4. added the test. ASPX page.

 <  Script  Language  = "JavaScript"  Type  = "Text/JavaScript"  SRC = "<%: System. Web. Optimization. bundletable. Bundles. resolvebundleurl ("  ~ /Resource/jquery ") %  >  "  > </SCRIPT> <link href =  "  <%  : System. Web. Optimization. bundletable. Bundles. resolvebundleurl (  "  ~ /Resource/Site  " )  %>  "  Rel =  "  Stylesheet  "  Type =  "  Text  /  CSS" /  >      <  Link href  =  "  <%: System. Web. Optimization. bundletable. Bundles. resolvebundleurl (  "  ~  /  Resource /  Easyuitheme_default  "  ) %>  "  REL  =  "  Stylesheet  "  Type  = "  Text/CSS  "   /  > 

 

In the above three lines of code, the parameters in resolvebundleurl are virtual paths written in global.

5. Running Effect
HTML code after running:

 <  Script  Language  = "JavaScript"  Type  = "Text/JavaScript" SRC  = "/Resource/jquery? V = uhq_enoqeukrtnpky2esjmsmxymbwynouoxfeql60qe1"  > </  Script  >      <  Link  Href  = "/Resource/site? V = fl58z5kgnr5nrutnqur7njmc88bydciwmzkbageiiue1"  REL  = "Stylesheet"  Type  = "Text/CSS"   />      < Link  Href  = "/Resource/easyuitheme_default? V = X93-Lv0WiNBjfikEUpcvXzoKPbscp6dDibQHhy9TV4I1"  REL  = "Stylesheet"  Type  = "Text/CSS"   /> 

 

After the jquery file is compressed, it is actually transmitted to the client as follows (the parameters have been replaced with one character, and spaces are also deleted ):

(Function(N, T ){FunctionYi (){If(! I. isready ){TryDatagr.doc umentelement. doscroll ("Left ")}Catch(N) {setTimeout (Yi, 1 );Return} I. Ready ()}}FunctionKI (n, T) {T. SRC? I. Ajax ({URL: T. SRC, async :! 1, datatype: "script"}): I. globaleval (T. Text | T. textcontent | T. innerhtml | ""),
 

 

6. debugging is inconvenient. If you want to debug JS, It is very inconvenient. Because Javascript is compressed, you need to change the method to implement it, as shown below:
In the test. aspx file, replace those codes with the following code.

 <%  : System. Web. Optimization. scripts. Render (  " ~ /Resource/jquery  "  )  %>      <%  : System. Web. Optimization. Styles. Render (  "  ~ /Resource/Site  "  )  %>     <%  : System. Web. Optimization. Styles. Render (  "  ~ /Resource/easyuitheme_default  "  )  %> 

 

Then change the Web. config parameter. debug is false:

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

 

It can also achieve the purpose of compressing JS and CSS. When we need to debug JS and CSS,Modify the configuration to compilation DEBUG = "true", and the JS and CSS will not be compressed., Very convenient

 

Comparison before and after compression

Unsolved Issues and precautions

After compression, the corresponding image reference in CSS will cause problems. In addition to manual changes, you still do not know how to solve the problem automatically (when using the MS bundle technology ).