转自:http://www.cnblogs.com/xwgli/p/3296809.html

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题。

具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

这里仅简单记录下如何使用。(笔者:路由管理器是对控制器资源的映射管理,bundle是对js及css文件的管理)

首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,Bundle应该已经自动配置上了,因为本身会有jQuery和jQuery UI的引用,这两项引用会用到Bundle。

就简单说一下要点吧。

首先在项目的App_Start文件夹中,会有一个BundleConfig.cs文件:

这里面写了所有需要Bundle的内容,可以自行设置:

其中的bundles.Add是在向网站的BundleTable中添加Bundle项,这里主要有ScriptBundle和StyleBundle,分别用来压缩脚本和样式表。用一个虚拟路径来初始化Bundle的实例,这个路径并不真实存在,然后在新Bundle的基础上Include项目中的文件进去。具体的Include语法可以查阅上面提供的官方简介。

然后对Bundle的注册是在项目根下的Global.asax文件中,这个文件中的Application_Start是网站程序的开始,里面注册了网站各种初始化的内容,其中就包括对BundleTable的Bundle添加:

默认情况下,Bundle是会对js和css进行压缩打包的,不过有一个属性可以显式的说明是否需要打包压缩:

BundleTable.EnableOptimizations = true;

如果将其设为false,那么就会和下面说的debug=true时的情况相同了。

在使用时,在相应位置调用ScriptRender和StyleRender的Render方法:

最终用户页面即可达到效果打包压缩效果。

有一个地方主要注意,在Web.config中,当compilation编译的debug属性设为true时,表示项目处于调试模式,这时Bundle是不会将文件进行打包压缩的,页面中引用的js和css会分散原样的展示在html中,这样做是为了调试时查找问题方便(压缩以后就恶心了。。。)。

最终部署运行时,将debug设为false就可以看到js和css被打包和压缩了。

=============

使用Bundle的关键在于要向ASP.NET中的BundleTable注册Bundle。

如果要在ASP.NET WebForm中使用Bundle,需要在新建项目时选择.NET Framework 4.5,最好使用模板网站新建,这样就可以直接看到Bundle了。

在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)的更多相关文章

  1. ASP.NET MVC 4使用Bundle的打包压缩JS/CSS

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  2. 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...

  3. ASP.NET MVC使用Bundle来打包压缩js和css

    Bundle它是用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 1.BundleConfig配置Bundl ...

  4. 在ASP.NET MVC中,使用Bundle来打包压缩js和css

    该总结参考博文地址:http://www.cnblogs.com/xwgli/p/3296809.html 1.首先了解Bundle的作用:Bundles用于打包CSS和javascript脚本文件, ...

  5. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

  6. 在MVC中使用Bundle打包压缩js和css

    第一步:安装 安装“System.Web.Optimization”:在中“NuGet”中搜索 安装. 第二步:配置 配置“Views”目录下的“web.config”文件增加“System.Web. ...

  7. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  8. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS(1)

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

随机推荐

  1. OpenLdap与BerkeleyDB安装过程

    前段时间在看LDAP方面的东西,最近重装了Ubuntu之后开始在自己的机器上装一个OpenLDAP. 装的过程中还遇到不少问题,不过通过Google同学的帮忙,全部得到解决.下面装安装过程记录如下: ...

  2. 2-9 js基础 cookie封装

    // JavaScript Document 'use strict'; function setCookie(sName,sValue,iDay){ if(iDay){ var oDate = ne ...

  3. WPF简单MVVM实现

    1. MVVM介绍: MVVM就是: Model -- 模型(现实中对象的抽象) View -- UI(用户界面) ViewModel -- UI界面的抽象(给View提供数据,并响应View的操作) ...

  4. Debian9安装桌面环境

    更新安装源 apt-get update 安装 x-window apt-get install x-window-system-core 安装 gnomeapt-get install gnome- ...

  5. [PY3]——函数——生成器(yield关键字)

    函数—生成器篇 1. 认识和区分可迭代or生成器 1.1 可迭代对象 当你建立了一个列表,你可以逐项地读取这个列表,这叫做一个可迭代对象 当你使用一个列表生成式来建立一个列表的时候,就建立了一个可迭代 ...

  6. 如鹏网学习笔记(十一)JQuery

    一.jQuery简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以替代传统DOM编程的操作方式和操作风格 jQuery通过对DOM API.DOM事件的封装,提供了 ...

  7. [C#]LockBits使用笔记

    昨天想基于一张图片做个手机锁屏来着,原图如下:主要是嫌白底太丑了,一开始是想画图工具直接油漆桶伺候,然而一浇上去就发现问题了,变成了这样:看来得手工处理一下把底色统一了,原图分辨率挺高的,SetPix ...

  8. 一:XML知识整理

    一:xml 1. xml简介 a) xml, eXtensible Markup Language, 可扩展标记语言.是一种标记语言. b) xml 是一种非常灵活的语言, 没有固定的标签, 所有的标 ...

  9. drupal的权限设置

    通过hook_menu()设置url的权限,有两种方式: 方式一:定义函数,通过 access callback 'access callback' => 'fun()', function f ...

  10. CSS3之word-wrap英文单词溢出强制换行

    语法 word-wrap: normal|break-word; 所有主流浏览器都支持 word-wrap 属性. <div style="border:1px #f00 solid; ...