第五章 MVC之Bundle详解
一、简述
Bundle,英文原意就是捆、收集、归拢。在MVC中的Bundle技术,也就是一个对css和js文件的捆绑压缩的技术。
它的用处:
将多个请求捆绑为一个请求,减少服务器请求数
压缩javascript,css等资源文件,减小网络带宽,提升性能
使用Bundle技术,并且拥有缓存功能,同时也可以对资源文件进行一定的模块化管理,可使用正则对需要的文件进行过滤匹配,也可以使用cdn文件
二、技术详解
1.怎么开启bundle
在项目的App_Start文件夹中,会有一个BundleConfig.cs文件;
public class BundleConfig{// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862public static void RegisterBundles(BundleCollection bundles){bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));// 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js","~/Scripts/respond.js"));bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/site.css"));BundleTable.EnableOptimizations = true; //是否打包压缩 }}
对Bundle的注册是在项目根下的Global.asax文件中,这个文件中的Application_Start是网站程序的开始,里面注册了网站各种初始化的内容,其中就包括对BundleTable的Bundle添加:BundleConfig.RegisterBundles(BundleTable.Bundles);
默认情况下,Bundle是会对js和css进行压缩打包的,不过有一个属性可以显式的说明是否需要打包压缩。
BundleTable.EnableOptimizations = true;
配置web.config,关掉调试状态,否则不会进行压缩。
<system.web><compilation debug="false" targetFramework="4.5.2" /></system.web>
2.如何使用
视图中调用方法:
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")
捆绑框架如以下几个共同的约定:
- 如果“FileX.min.js”和“FileX.js”都存在,请为发行版选择“.min”文件。
- 选择用于调试的非".min"版本。
- 忽略"-vsdoc"仅使用智能感知的文件 (如 jquery-1.7.1-vsdoc.js)。
如上所示的{version}
通配符匹配用于自动创建一个 jQuery 束具有适当版本的 jQuery脚本文件夹中。在此示例中,使用通配符提供了以下好处:
- 允许您使用 NuGet 更新到新的 jQuery 版本而无需更改前面的绑定代码或 jQuery 引用在您查看网页。
- 自动选择完整版,为调试配置和发布的".min"版本生成。
3.使用 CDN
以下代码将使用 CDN jQuery 绑定来替换本地 jQuery 绑定。
public static void RegisterBundles(BundleCollection bundles) {bundles.UseCdn = true; //enable CDN support//add link to jquery on the CDNvar jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";bundles.Add(new ScriptBundle("~/bundles/jquery",jqueryCdnPath).Include("~/Scripts/jquery-{version}.js")); }
在上面的代码中,jQuery 将请求从 CDN 虽然在释放模式和 jQuery 的调试版本将被回迁本地在调试模式下。当使用 CDN,你应该有一个回退机制在 CDN 请求失败的情况下。下面的标记片段从布局文件的末尾显示脚本添加请求 jQuery 应 CDN 失败。
@Scripts.Render("~/bundles/jquery")<script type="text/javascript">if (typeof jQuery == 'undefined') {var e = document.createElement('script');e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';e.type = 'text/javascript';document.getElementsByTagName("head")[0].appendChild(e);}</script> @RenderSection("scripts", required: false)
三、常见问题
1. css中引用的图片路径出现错误
在css中,图片路径一般都是写相对路径,使用bundle后出现错误。处理方法:通过 new CssRewriteUrlTransform() 来解决
bundles.Add(new StyleBundle("~/Content/login").Include("~/Content/login.css", new CssRewriteUrlTransform()));
2. css中使用@Import "base.css" 找不到对应的文件
解决:修改为 @import url("base.css");
import的相关文章:https://segmentfault.com/a/1190000000369549
3.JS智能感知
重点就是最下面的一条:~/Scripts/_references.js,这个就是默认的自定义公共js智能感知引用文件
详细看https://www.cnblogs.com/zuqing/p/4862142.html
参考:
http://blog.csdn.net/zhou44129879/article/details/16818987
http://www.cnblogs.com/weishao/archive/2013/04/12/3015005.html
第五章 MVC之Bundle详解相关推荐
- 第五章 处理器拦截器详解——跟着开涛学SpringMVC
5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器)类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. ...
- 第五章 处理器拦截器详解
5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器) 类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. ...
- python中字符串类型的encode()方法_第五章 Python字符串常用方法详解
5.1 Python字符串拼接(包含字符串拼接数字) 在 Python中拼接(连接)字符串很简单,可以直接将两个字符串紧挨着写在一起,具体格式为: strname = "str1" ...
- 【WebService】第五章、WSDL文件详解
本章主要详细记录如何读懂一个WSDL描述文件. 在上一章里面我们已经成功部署了一个WebService服务,并且通过浏览器能够顺利的看到WSDL文件.那么该文件 表示什么含义呢?通过这个文件我们该如何 ...
- 《精通Spring4.X企业应用开发实战》读后感第五章(注入参数详解)
转载于:https://www.cnblogs.com/Michael2397/p/7954596.html
- 源代码下载 第六章 注解式控制器详解
2019独角兽企业重金招聘Python工程师标准>>> 源代码请到附件中下载. 其他下载: 跟着开涛学SpringMVC 第一章源代码下载 第二章 Spring MVC入门 源代码下 ...
- 尚学堂(java)1到13章所有练习题答案详解
尚学堂1到13章所有练习题答案详解 未完待续- 文章目录 尚学堂1到13章所有练习题答案详解 B站网课链接 第一章 一.选择题 二.简答题 三.上机操作 第二章 第三章 第四章 一.选择题 二.简答题 ...
- java中北大学ppt总结+课后习题第二章(小宇特详解)
java中北大学ppt总结+课后习题第二章(小宇特详解) 基本数据类型 Java语言有8种基本数据类型. 逻辑类型:boolean.1字节 整数类型: 1字节整数类型:byte. 2字节整数类型:sh ...
- java处理请求的流程_Java Spring mvc请求处理流程详解
Spring mvc请求处理流程详解 前言 spring mvc框架相信很多人都很熟悉了,关于这方面的资料也是一搜一大把.但是感觉讲的都不是很细致,让很多初学者都云里雾里的.本人也是这样,之前研究过, ...
最新文章
- mysql 所有表的字段信息_mysql如何查询所有表和字段信息
- Linux期末复习题库(3)
- 第十五届全国大学生智能车竞赛浙江赛区隆重开幕
- 找回mysql root密码_找回MySQL的root密码
- 谈谈To B业务的难点
- 左手供给,右手营销,聚划算99大促首战告捷的下沉市场进攻方法论
- 应届生是这辈子最大的一次优势,也是最后一次!
- Asp.net 2.0 发送电子邮件
- “约见”面试官系列之常见面试题第四十三篇之页面输入url之后发生了什么?(建议收藏)
- GitHub建立个人网站(二)
- 标注工具——VoTT的调试笔记
- jsonpath学习链接
- win10安装visio2010出错_win7安装Office Visio 2010时出现错误怎么办
- 干货 | 挖掘旅游热点吸引年轻人,携程自动热点投放系统的背后玩法
- python socket编程详细教程_最基础的Python的socket编程入门教程
- OpenCV4学习笔记(27)——轮廓的最大内接圆
- 手把手教你实现echarts3的折线图下钻drilldown功能系列篇二
- JavaEE项目的三层架构
- 如何设置zotero连接到坚果云
- cloudera-scm-agent start 启动失败