MVC项目开发中那些用到的知识点(js css优化-- 合并和压缩)

简介: 在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。

在项目框架中,首先要引用很多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">
      <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"  />
    </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进行过配置。

最后一步运行查看,这是未修改之前的

接下来看修改之后的

效果很明显,原来的四次请求,变成了两次请求。

 

 

示例代码下载

 

 

目录
相关文章
|
5天前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
18 2
|
10天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
21 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
19天前
|
JavaScript 前端开发
JavaScript 知识点总结
JavaScript 知识点总结JavaScript 是一种广泛应用于前端开发的编程语言。本文将总结一些常见的 JavaScript 知识点,帮助你更好地理解和应用这门语言。 一、基本语法和数据类型 变量声明:使用 var、let 或 const 声明变量。var 声明的变量具有函数作用域,而 let 和 const 声明的变量具有块级作用域。 var x = 10; let y = 20; const z = 30; 数据类型:JavaScript 中有以下几种基本数据类型:String(字符串)、Number(数字)、Boolean(布尔值)、Undefined(未定义)、Null(空值
25 3
|
22天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
7天前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
19天前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
29 0
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
|
2月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
9天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
下一篇
云函数