ASP.NET MVC Bundles 用法和说明(打包javascript和css)
本文主要介绍了ASP.NET MVC中的新功能Bundles,利用Bundles可以将javascript和css文件打包压缩,并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题。
在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以ASP.NET MVC4引入了Bundles特性,使得我们可以方便的管理javascript和css文件。
原来,我们引用css和javascript文件我们需要这样一个一个的引用:
<scriptsrc="~/Scripts/jquery-1.8.2.js"></script>
<scriptsrc="~/Scripts/jquery-ui-1.8.24.js"></script>
<scriptsrc="~/Scripts/jquery.validate.js"></script>
<linkhref="~/Content/Site.css"rel="stylesheet"/>
当需要引用文件的数量较少时还好,但一旦每个页面都需要引用较多文件时,会造成极大的不便,当我们想更换某个引用文件时,将会浪费大量的时间。发布时,还要将一些库替换成release版,比如上面的jquery-1.8.2.js所对应的jquery-1.8.2.min.js
还好,现在我们可以使用Bundles特性:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui")
.Include("~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval")
.Include("~/Scripts/jquery.unobtrusive*"
,"~/Scripts/jquery.validate*"));
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site.css"));
}
}
接着在Global.asax文件的Application_Start方法中调用BundleConfig.RegisterBundles方法:
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
在上面我们可以看到我们按照功能的不同,将不同的文件分到了相应的Bundle(Bundle就是包的意思),其中构造函数中的string参数是Bundle的名称,Include函数是将参数相应的文件包含成一个Bundle。可以发现,对于jquery库我们使用了这样的名称~/Scripts/jquery-{version}.js,其中{version}部分代表版本号的意思,MVC将会替我们在Scripts文件中寻找对应的"jquery-版本号.js"文件,并且在非debug模式下,MVC则会使用“jquery-版本号.min.js"文件。
我们还看到我们使用了这样的名称~/Scripts/jquery.validate*的名称,*是一个通配符,这就意味着Scripts文件夹下的所有前缀为jquery.validate的文件都将包含在同一个Bundle中。
最后,我们可以View上使用Bundle来代替原来引用的方式:
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
转载自http://www.jb51.net/article/82174.htm
作者:tuohaibei
ASP.NET MVC Bundles 用法和说明(打包javascript和css)的更多相关文章
- ASP.NET MVC 4使用Bundle的打包压缩JS/CSS
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历
首先我是想要在ASP.NET MVC 5.0中使用从jQuery之家下载下来的插件. 在下载了许多我觉得好用方便的插件之后,我在VS2017中新建了一个项目叫MVCTest,然后选择MVC模板,等待自 ...
- ASP.NET MVC Bundles 之学习笔记
在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以AS ...
- ASP.NET MVC Bundles 合并压缩(js css)
Chrome浏览器有并发的Http请求限制,Bundles可以将多个JS文件合并成一个文件并进行压缩,最终得到一个单文件的压缩包. 第一步:BundleConfig public class Bund ...
- ASP.NET MVC利用ajax把action的JavaScript注册到页面并执行
相信大家在做Webform时经常会遇到在页面的后台CS文件中根据数据运行结果修改页面显示样式.显示(隐藏).或者弹出框,当时我们会用到ScriptManage或者Page来向页面注册一段js来实现页面 ...
- asp.net mvc项目实记-开启伪静态-Bundle压缩css,js
百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...
- (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能
转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...
随机推荐
- 写了一个Mac快速设置、打开和关闭Web代理的Shell命令
缘由(痛点) 每次在Mac上设置Web代理,都需要点开"系统偏好设置 -- 网络 -- 高级 -- 代理",然后分别设置Web代理(HTTP)和安全Web代理(HTTPS),设置完 ...
- pb传输优化浅谈
在正式切入今天要谈的优化之前,先碎碎念一些自己过去这几年的经历.很久没有登录过博客园了,今天也是偶然兴起打开上来看一下,翻看了下自己的随笔,最后一篇原创文章发布时间是2015年的4月,今天是2017年 ...
- 编码的秘密(python版)
编码(python版) 最近在学习python的过程中,被不同的编码搞得有点晕,于是看了前人的留下的文档,加上自己的理解,准备写下来,分享给正在为编码苦苦了挣扎的你. 编码的概念 编码就是将信息从一种 ...
- UI篇之——用户体验
内容均为原创,转载请注明处处谢谢. 用户体验(User Experience,简称UX)是一个关于用户(users)以及交互(interactive)技术系统领域的整体概念.具体来说,它代表了一个网站 ...
- 团体队列UVA540 Team Queue(队列简单用法)
题目背景 队列和优先级队列是大多数计算机科学家都知道的数据结构.但是团队队列却不被人熟知,尽管在生活中经常出现.比如,午餐时间的食堂门口的队列就是一个团队队列.在一个团队队列中,每个元素属于一个团队. ...
- AVAudioFoundation(2):音视频播放
本文转自:AVAudioFoundation(2):音视频播放 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 要播放 AVA ...
- flask 上传头像
上传头像,自己感觉了好久,就是上传文件呗其实,存在一个路径,数据库存储这个路径,然后展示给前端,啥都不说,看怎么实现的. 数据库设置如下 user_image=db.Column(db.String( ...
- JavaScript学习笔记(一)——初识js
这个周,开始了JavaScript的学习路程.虽然从高中开始就接触了网页设计的知识,大学里的学习也算回顾了Html和Css的知识,实习期间在牛盾科技也是做的网站建设,不过通过前段时间找工作才发现自己了 ...
- Ext TabPanel tabbar添加按钮
tabPanel tabbar添加按钮 this.tabPanel = Ext.create('Ext.tab.Panel', { tabBar:{ items:[{ //组件靠右 xtype: 't ...
- 高级Java程序员的技术进阶之路
据不完全统计,截至目前(2017.07)为止,中国Java程序员的数量已经超过了100万.而且,随着IT培训业的持续发展和大量的应届毕业生进入社会,Java程序员面临的竞争压力越来越大.那么,作为 ...