1200字范文 > 性能优化--JS CSS压缩合并

性能优化--JS CSS压缩合并

时间：2024-06-27 21:45:26

相关推荐

性能优化--JS CSS压缩合并

在前台性能优化过程中，减少HTTP请求数量，就可以减少与服务器交互次数，从而很好的提高系统性能，此次通过实践，网络查阅资料，发现两种压缩合并js和css的方式：combres和BundleConfig；本文描述combres方式实现js、css压缩合并，望广大网友提出合理性意见和建议。

【Combres的建立】

本次实践是在vs版本的基础上创建的MVC3项目，如果其他项目会涉及到一些引用版本的问题

实现步骤：

1. 建立空的MVC项目

2. 使用NuGet下载使用combres.dll和combres.mvc

注意：combres引用的版本太高时会导致一些文件的版本高于mvc引用版本，这时需要我们我们通过nuget下载制定版本的combres和combres.mvc,步骤如下：

工具---库程序包管理---程序包管理器控制台，输入：PM>Install-Package combres –version 版本号

此次在项目实践中引用的版本是2.2.2.17

3. 安装完成自动生成App_Data/combres.xml

<??> <combrescombres ='urn:combres'> <resourceSetsurl="~/combres.axd"defaultDuration="30" //默认时间缓存：天数defaultVersion="auto" //合并后的资源版本号，可以为自动或指定defaultDebugEnabled="auto"> //调试模式，true时不进行压缩<resourceSetname="siteCss"type="css"> <resourcepath="~/styles/site.css"/> <resourcepath="~/styles/jquery-ui-1.7.2.custom.css"/> </resourceSet> <resourceSetname="siteJs"type="js"> <resourcepath="~/scripts/jquery-1.4.4.js"/> <resourcepath="~/scripts/jquery-ui-1.7.2.custom.min.js"/> </resourceSet> </resourceSets> </combres>

在上面代码中添加filter 和cssminifiers节点，用于选择使用哪种方法对资源进行压缩，如下：

<?xml version="1.0" encoding="utf-8" ?><combres xmlns='urn:combres'><filters><filter type="Combres.Filters.FixUrlsInCssFilter, Combres" /></filters><cssMinifiers><minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres"><param name="CssCompressionType" type="string" value="StockYuiCompressor" /><param name="ColumnWidth" type="int" value="-1" /></minifier></cssMinifiers><jsMinifiers><minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres"binderType="Combres.Binders.SimpleObjectBinder, Combres"><param name="CollapseToLiteral" type="bool" value="true" /><param name="EvalsAreSafe" type="bool" value="true" /><param name="MacSafariQuirks" type="bool" value="true" /><param name="CatchAsLocal" type="bool" value="true" /><param name="LocalRenaming" type="string" value="CrunchAll" /><param name="OutputMode" type="string" value="SingleLine" /><param name="RemoveUnneededCode" type="bool" value="true" /><param name="StripDebugStatements" type="bool" value="true" /></minifier></jsMinifiers><resourceSets url="~/combres.axd"defaultDuration="30"defaultVersion="auto"defaultDebugEnabled="false"defaultIgnorePipelineWhenDebug="true"localChangeMonitorInterval="30"remoteChangeMonitorInterval="60"><resourceSet name="siteCss" type="css" minifierRef="off"><resource path="~/Content/jquery-easyui-1.3.2/themes/default/easyui.css" /><resource path="~/Content/jquery-easyui-1.3.2/themes/icon.css" />><resource path="~/CSS/test.css" /></resourceSet><resourceSet name="siteJs" type="js"><resource path="~/Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js" minifierRef="off" /><resource path="~/Content/jquery-easyui-1.3.2/jquery.easyui.min.js" minifierRef="off" /></resourceSet></resourceSets></combres>

4.删除appstart/combres.cs

5. 打开global.asax添加using combres的引用。在registerroutes方法的第一行添加：

RouteTable.Routes.AddCombresRoute("Combres");

6. 将页面js和css替换为：

@using Combres.Mvc; //html页最开始@bresLink("siteCss")@bresLink("siteJs")

【实践应用】

在项目开发过程中应用到大量的js和css引用，每一个view页面在加载过程中都会先调用母版页easyUILayout.cshtml，项目过程中将公用的css和js都放到了这进行引用，将这些引用进行压缩可以很好的缓解页面代码压力，其combres.xml代码如下：

本次实践系统：ITOO考评系统--考试配置

开发环境：VS+MVC3+easyUI

<?xml version="1.0" encoding="utf-8" ?><combres xmlns='urn:combres'><filters><filter type="Combres.Filters.FixUrlsInCssFilter, Combres" /></filters><cssMinifiers><minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres"><param name="CssCompressionType" type="string" value="StockYuiCompressor" /><param name="ColumnWidth" type="int" value="-1" /></minifier></cssMinifiers><jsMinifiers><minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres"binderType="Combres.Binders.SimpleObjectBinder, Combres"><param name="CollapseToLiteral" type="bool" value="true" /><param name="EvalsAreSafe" type="bool" value="true" /><param name="MacSafariQuirks" type="bool" value="true" /><param name="CatchAsLocal" type="bool" value="true" /><param name="LocalRenaming" type="string" value="CrunchAll" /><param name="OutputMode" type="string" value="SingleLine" /><param name="RemoveUnneededCode" type="bool" value="true" /><param name="StripDebugStatements" type="bool" value="true" /></minifier></jsMinifiers><resourceSets url="~/combres.axd"defaultDuration="30"defaultVersion="auto"defaultDebugEnabled="false"defaultIgnorePipelineWhenDebug="true"localChangeMonitorInterval="30"remoteChangeMonitorInterval="60"><resourceSet name="siteCss" type="css" minifierRef="off"><resource path="~/Content/jquery-easyui-1.3.2/themes/default/easyui.css" /><resource path="~/Content/jquery-easyui-1.3.2/themes/icon.css" /><resource path="~/Content/jquery-easyui-1.3.2/demo/demo.css" /><resource path="~/CSS/index.css" /><resource path="~/CSS/FlowHead/base.css" /><resource path="~/CSS/FlowHead/step.css" /><resource path="~/CSS/FlowHead/index.css" /><resource path="~/CSS/test.css" /></resourceSet><resourceSet name="siteJs" type="js"><resource path="~/Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js" minifierRef="off" /><resource path="~/Content/jquery-easyui-1.3.2/jquery.easyui.min.js" minifierRef="off" /><resource path="~/Content/jquery.balloon.js" minifierRef="off" /><resource path="~/Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" minifierRef="off" /><resource path="~/Scripts/MyScript/ITOO_Common.js" minifierRef="off" /><resource path="~/Scripts/FlowHead/flowHead.js" minifierRef="off" /><resource path="~/Scripts/StartExam/AddExam.js" /><resource path="~/Scripts/StartExam/StartExam.js" /><resource path="~/Scripts/MyScript/ITOO_Common.js" minifierRef="off" /><resource path="~/Scripts/MyScript/ITOO_Common.js" minifierRef="off" /></resourceSet></resourceSets></combres>

通过firebug的Net测试，未进行合并前总请求为24个，总时间为1.1s：

进行压缩后，总请求数减少至9个，总用时577ms：

达到的效果图：