js css优化-- 合并和压缩
在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,我们这里主要针对js和css文件进行优化,使用Combres工具
第一步准备工具Nuget可以百度,也可以在此http://nuget.org/
第二步通过VS2010管理NuGet程序包来查找第二个工具,也就是本次要使用的工具Combres的工具。
点击安装后,会在项目中生成一系列的文件和引用。
在App_Data/combres.xml,这个就是设置压缩/合并的文件配置。
第三步进行对配置文件进行处理,当然主要是对css文件和Js文件进行相关配置,修改combres.xml如下。
<?xml version= "1.0" encoding= "utf-8" ?> <!-- This file contains basic settings needed for most web apps. For full Combres settings (with explanation), refer to the sample definition file: combres_full_with_annotation.xml Also, refer to Combres' documentation: http: //combres.codeplex.com/documentation --> <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> <!--defaultDuration 默认缓存的时间,单位为天数--> <!--defaultVersion 合并后的资源版本,在你修改了资源文件后需要对版本进行修改,你可以指定auto或者手动设置一个版本号--> <!--defaultDebugEnabled 调试的模式,为 true 时那么资源文件不进行压缩,开发时可以设置成 true ,上线后设置成 false --> <resourceSets url= "~/combres.axd" defaultDuration= "30" defaultVersion= "auto" defaultDebugEnabled= "false" defaultIgnorePipelineWhenDebug= "true" localChangeMonitorInterval= "30" remoteChangeMonitorInterval= "60" > <resourceSet name= "siteCss" type= "css" minifierRef= "yui" > <span style= "background-color: #99cc00;" > <resource path= "~/Content/Site.css" /> <resource path= "~/Content/StyleSheet1.css" /> </resourceSet> <resourceSet name= "siteJs" type= "js" > <resource path= "~/Scripts/jquery-1.5.1.min.js" minifierRef= "msajax" /> <resource path= "~/Scripts/test.js" minifierRef= "off" /></span> </resourceSet> </resourceSets> </combres> |
这是我修改之后的文件配置。主要是resourceSet节点下的配置。
<!--defaultDuration 默认缓存的时间,单位为天数-->
<!--defaultVersion 合并后的资源版本,在你修改了资源文件后需要对版本进行修改,你可以指定auto或者手动设置一个版本号-->
<!--defaultDebugEnabled 调试的模式,为true时那么资源文件不进行压缩,开发时可以设置成true,上线后设置成false-->
第四步 删除 AppStart/Combres.cs,移除WebActivetor的引用。打开 global.asax 添加 using Combres;的引用。在 RegisterRoutes 第一行添加routes.AddCombresRoute("Combres")
第五步 在需要的视图文件进行引用,先来看一下未做修改前的文件内容
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href= "@Url.Content(" ~/Content/Site.css ")" rel= "stylesheet" type= "text/css" /> <link href= "@Url.Content(" ~/Content/StyleSheet1.css ")" rel= "stylesheet" type= "text/css" /> <script src= "@Url.Content(" ~/Scripts/jquery-1.5.1.min.js ")" type= "text/javascript" ></script> <script src= "@Url.Content(" ~/Scripts/test.js ")" type= "text/javascript" ></script> </head> |
|
接下来是修改之后的
@ using Combres.Mvc; <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> @Html.CombresLink( "siteCss" ) @Html.CombresLink( "siteJs" ) </head> |
siteCss和sitJs已经在上面App_Data/combres.xml进行过配置。
最后一步运行查看,这是未修改之前的
接下来看修改之后的
效果很明显,原来的四次请求,变成了两次请求。
|
js css优化-- 合并和压缩的更多相关文章
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- [转]使用 YCombo 做 JS /CSS开发 合并 压缩
本文转自:http://www.neoease.com/minimize-javascript-files-using-ycombo/ 前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具 ...
- gulp 实现 js、css,img 合并和压缩
前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...
- 【web性能】 JS、CSS的合并、压缩、缓存管理
本篇文章主要讨论下目前JS,CSS 合并.压缩.缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载. 存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发 ...
- grunt 压缩js css html 合并等配置与操作详解
module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...
- gulp 实现 js、css,img 合并和压缩(转)
前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...
- gulp打包js/css时合并成一个文件时的顺序解决
1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- requireJS中如何用r.js对js进行合并和压缩css文件
我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...
随机推荐
- XSL相关
<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="tex ...
- Java线程池主线程等待子线程执行完成
今天讨论一个入门级的话题, 不然没东西更新对不起空间和域名~~ 工作总往往会遇到异步去执行某段逻辑, 然后先处理其他事情, 处理完后再把那段逻辑的处理结果进行汇总的产景, 这时候就需要使用线程了. 一 ...
- js--学习方法之2-转
再说几点忠告 1,不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到.没达到一定的武功水平,割了小JJ也学不会葵花宝典的. 2,别急着加技术交流QQ群,加牛人QQ.如果你找张三丰交流 ...
- php 类型
var_dump 打印出类型和值 整型inter用 decimal 表示为 decimal : [1-9][0-9]* | 0 (int) ( (0.1+0.7) * 10 ); 强制类 ...
- 3DTouch--2
苹果太贱了! 3D Touch 只能在真机上面试,模拟器没办法玩! ------------- 描述有点粗燥.....有6S 在手上玩得童鞋会更加清楚,只有玩过才更加体验到. 首先 有几个要知道的手势 ...
- 6、Spring+Struts2+MyBatis(mybatis有代理)整合增删改查
1.创建如下的oracle脚本 create table userinfo (id ), name ), password telephone ), isadmin )); --4.2 用户表序列 c ...
- Matlab - 线性方程组求解
常用函数:det 计算矩阵的行列式的值inv 求矩阵的逆阵rank 求矩阵的秩[V D]=eig(A) 求矩阵A的特征值和特征向量poly 求矩阵的特征多项式rref 用初等变换将矩阵化成行阶梯形nu ...
- HDU 1863 Kruskal求最小生成树
好久没写博客了写着玩的…… Kruskal这种东西离散都学过…… 一句话…… 添加当前图权值最小且构不成环的一条边 直到连接所有点…… 其他人好多Kruskal的模版 肯定有比我的好的…… 就是刷一波 ...
- java 单元测试
---恢复内容开始--- 1/引入包:junit-4.11.jar|hamcrest-core-1.3(alilib里有) 2/与src同级建立一个文件夹,名为test,右击,Mark Directo ...
- 请问如何查询一个APP的Android和iOS下载量?
作者:Jasmine Jiang链接:http://www.zhihu.com/question/28533067/answer/87871598来源:知乎著作权归作者所有,转载请联系作者获得授权. ...