第五章 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=301862
public 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 CDN
var 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")[].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详解的更多相关文章
- “全栈2019”Java异常第十五章:异常链详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- 《精通Spring4.X企业应用开发实战》读后感第五章(注入参数详解)
- SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解
SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解 博客分类: 跟开涛学SpringMVC 6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于 ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- “全栈2019”Java第九十四章:局部内部类详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- iOS中MVC等设计模式详解
iOS中MVC等设计模式详解 在iOS编程,利用设计模式可以大大提高你的开发效率,虽然在编写代码之初你需要花费较大时间把各种业务逻辑封装起来.(事实证明这是值得的!) 模型-视图-控制器(MVC)设计 ...
- 【STM32H7教程】第13章 STM32H7启动过程详解
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第13章 STM32H7启动过程详解 本章教 ...
- [五]基础数据类型之Short详解
Short 基本数据类型short 的包装类 Short 类型的对象包含一个 short 类型的字段 原文地址:[五]基础数据类型之Short详解 属性简介 值为 215-1 ...
随机推荐
- UWP 判断Windows10系统版本
, ); , ); , ); , ); if(VersionsHelper.Windows10Build15063) { }
- haproxy,tomcat.apache记录用户真实IP
Haproxy配置: default加入: option httpclose option forwardfor Tomcat配置: server.xml中添加 prefix="localh ...
- SpringBoot多数据源配置
准备环境: jdk1.8 eclipse tomcat8.0 第一步:在配置文件添加如下信息: spring.datasource.primary.url=jdbc:mysql://localhost ...
- java 邮件发送的公共方法
protected static String host = "true"; protected static String auth = "smtp.163.com&q ...
- 递归回溯 UVa140 Bandwidth宽带
本题题意:寻找一个排列,在此排序中,带宽的长度最小(带宽是指:任意一点v与其距离最远的且与v有边相连的顶点与v的距离的最大值),若有多个,按照字典序输出最小的哪一个. 解题思路: 方法一:由于题目说结 ...
- python3.6 urllib.request库实现简单的网络爬虫、下载图片
#更新日志:#0418 爬取页面商品URL#0421 更新 添加爬取下载页面图片功能#0423 更新 添加发送邮件功能# 优化 爬虫异常处理.错误页面及空页面处理# 优化 爬虫关键字黑名单.白名单,提 ...
- UITableView使用过程中可能遇到的问题
前言:记录一些UITableView使用过程中可能遇到的问题 环境:Xcode9 解决UITableViewStyleGrouped类型的TableView的cell距离顶部有距离的问题: table ...
- 基于QT的异质链表实例
所谓的异质链表就是的节点元素类型能够不同.本实例採用C++抽象类和多态实现. #include <QApplication> #include<QPushButton> #in ...
- linux OSI七层模型、TCP/IP协议栈及每层结构大揭秘
学习Linux,就算是像小编我这样的小萌新,也知道OSI模型.什么?!你不知道!!! 好吧,这篇秘籍拿走,不谢~~~ 一.两个协议 (1)OSI 协议模型(7层)国际协议 PDU:协议数据单元对 ...
- 机器学习 - pycharm, tensorflow集成篇
继续上篇的pyspark集成后,我们再来看看当今热的不得了的tensorflow是如何继承进pycharm环境的 参考: http://blog.csdn.net/include1224/articl ...