css和js优化,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如下。

binderType="Combres.Binders.SimpleObjectBinder, Combres">

defaultDuration="30"

defaultVersion="auto"

defaultDebugEnabled="false"

defaultIgnorePipelineWhenDebug="true"

localChangeMonitorInterval="30"

remoteChangeMonitorInterval="60"

>

这是我修改之后的文件配置。主要是resourceSet节点下的配置。

第四步 删除 AppStart/Combres.cs，移除WebActivetor的引用。打开 global.asax 添加 using Combres;的引用。在 RegisterRoutes 第一行添加routes.AddCombresRoute("Combres")

第五步 在需要的视图文件进行引用，先来看一下未做修改前的文件内容

@ViewBag.Title

接下来是修改之后的

@using Combres.Mvc;

@ViewBag.Title

@Html.CombresLink("siteCss")

@Html.CombresLink("siteJs")

siteCss和sitJs已经在上面App_Data/combres.xml进行过配置。

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

接下来看修改之后的

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

前端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 ...

随机推荐

JQ写法和js写法 方法函数化

$(function () { $('#head').click=function () { alert($(this).html()) } })

Dedesql数据库类详解

今天花点时间讲解下织梦的sql数据库类,近期本来是准备录制一套视频教程的,但由于视频压缩的问题迟迟没有开展工作,如果大家有什么好的视频压缩方式可以通过邮件的方式告诉我:tianya#dedecms.c ...

【ZJOI2004】嗅探器

练tarjian不错的题,连WA几次后终于会记住tarjian的模板了 原题: 某军搞信息对抗实战演习.红军成功地侵入了蓝军的内部网络.蓝军共有两个信息中心.红军计划在某台中间服务器上安装一个嗅探器, ...

[图文详解] Sublime Text在Windows/Ubuntu/Mac OSX中配置使用CTags

很开发者都在找Sublime Text中函数转跳的功能,这个是软件自身没有的功能,要靠CTags这个插件配合CTags的可执行程序的实现的．按照我的理解是CTags扫描索引你的项目文件,然后subli ...

List<T>

List formEntity = new List (){new FormEntity{ IsFile = true,Name ...

USACO Longest Prefix 【水】

用Dp的思想解决了这道题目,也就是所谓的暴力= = 题意:给出一个集合,一个字符串,找出这个字符串的最长前缀,使得前缀可以划分为这个集合中的元素(集合中的元素可以不全部使用). 还不会Trie 树QA ...

【C#基础知识】静态构造函数，来源于一道面试题的理解

看到园友的一道面试题,很好奇,测试了一下结果. public class A { public static int X=B.Y ; public A() { ++X; } } public clas ...

Adobe After Effects 2017-14.0安装教程

Adobe After Effects 2017-14.0安装教程 第一步:首先请将电脑的网络断开,很简单:禁用本地连接或者拔掉网线,这样就可以免除登录Creative Cloud帐号,安装更方便快捷 ...

三种dedecms友情链接调用标签

三种dedecms友情链接调用标签: 1.获取友情链接分类 {dede:flinktype}[field:typename/]{/dede:flink ...

vue项目中 如何让外部引入的js模块 的this值 指向vue实例

当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObje ...