在项目框架中，首先要引用很多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优化-- 合并和压缩的更多相关文章

  1. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  2. [转]使用 YCombo 做 JS /CSS开发 合并 压缩

    本文转自:http://www.neoease.com/minimize-javascript-files-using-ycombo/ 前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具 ...

  3. gulp 实现 js、css,img 合并和压缩

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  4. 【web性能】 JS、CSS的合并、压缩、缓存管理

    本篇文章主要讨论下目前JS,CSS 合并.压缩.缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载.   存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发 ...

  5. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  6. gulp 实现 js、css,img 合并和压缩(转)

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  7. gulp打包js/css时合并成一个文件时的顺序解决

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  8. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  9. requireJS中如何用r.js对js进行合并和压缩css文件

    我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...

随机推荐

  1. Java参数传递问题

    参考资料:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html   http://blog.csdn.net/a412588063/article/ ...

  2. String类之endsWith方法--->检测该字符串以xx为结尾

    endsWith(XX)方法是java内置类String类的一个内置方法,我们直接拿来用即可了,下边是api说明:检测该字符串以xx为结尾,结果返回布尔值 public class Demo { pu ...

  3. apt-get dpkg lock 和 debconf 问题

    一: 在用sudo apt-get install 安装软件时,由于速度太慢,想换个软件源,直接关闭了终端,apt-get但进程没有结束,结果终端提示 E: Could not get lock /v ...

  4. 图的存储结构：邻接矩阵（邻接表）&链式前向星

    [概念]疏松图&稠密图: 疏松图指,点连接的边不多的图,反之(点连接的边多)则为稠密图. Tips:邻接矩阵与邻接表相比,疏松图多用邻接表,稠密图多用邻接矩阵. 邻接矩阵: 开一个二维数组gr ...

  5. poj 1142 Smith Numbers

    Description While skimming his phone directory in 1982, Albert Wilansky, a mathematician of Lehigh U ...

  6. Chapter 15_3 使用环境

    创建模块的基本方法的缺点在于,忘记使用local,很容易就污染全局空间. “函数环境”是一种有趣的技术,它能够解决上面的问题.就是让模块的主程序块独占一个环境. 这样不仅它的所有函数可以共享这个tab ...

  7. Openjudge-计算概论（A）-回文串判断

    描述: 任意给定一个非空的字符串,判断其是否是回文串.回文串是指正向看和反向看均相等的串,如AbcDcbA和cDDc.如果是回文串,则输出1,否则,输出0 输入长度不小于1不大于100的字符串输出如果 ...

  8. linux ssh连接不自动断开

    修改linux服务器ssh配置文件: vim /etc/ssh/ssh_config 修改两处的值为: ClientAliveInterval ClientAliveCountMax 使修改的ssh配 ...

  9. hibernate在配置文件中配置对象关系映射文件即hbm文件路径的写法

    hbm文件如果在src下,则<mapping resource="*.hbm.xml"/> 如果在实体类包中,则<mapping resource="c ...

  10. Tsung记录

    1.提高Tsung登录用户数 ulimit -n (65530)修改系统最大连接数,Tsung压力机和服务器都需要更改