mvc4开篇之BundleConfig（1）

新建一个mvc4默认项目，会看到以下目录

打开App_start 里面BundleConfig.cs文件

你会看到这么一段话：

有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725

我现在讲的东西跟上面网址所说大同小异，不同网址里面是英文版

我这里讲的一些简单点

Bundling 这个英文从字面意思来说是：捆绑意思。。。

从程序层面来说：就是将所有文件捆绑在一起，然后压缩成一个文件

Demo就不使用官方，我手动建一个，估计大家会看明白点

1、在BundleConfig.cs加入以下2段话

 bundles.Add(new StyleBundle("~/test/style").Include("~/Content/a.css","~/Content/b.css"));

注意：~/test/style这个可以理解虚拟文件夹，实际上是不存在，但它里面包括2个文件

~/Content/a.css 和 ~/Content/b.css

2、　在a.css加入以下内容，没有实际意义，为了测试

.a_test_style {
font-size:12px;
}

在b.css加入以下内容，没有实际意义，为了测试

.a_test_style {
font-size:12px;
}

3、在Home文件夹增加Index视图，当然对于controller也要增加 index()方法

参考一下官方调用例子 site.master里面

<%: Styles.Render("~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Styles.Render("~/Content/themes/base/css") %>

测试页面代码很简单

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><!DOCTYPE html><html>
<head runat="server"><meta name="viewport" content="width=device-width" /><title>Test</title><%:Styles.Render("~/test/style") %>
</head>
<body><div><p>有钱就是任性</p></div>
</body>
</html>

调用：<%:Styles.Render("~/test/style") %>

4、生成 运行，看到以下结果

看到2条请求（google浏览器 F12）

当然这个效果不是我最终所要的..

5、这就要我们合并文件，有2个方法

1、在配置文件Config<compilation debug="true" targetFramework="4.0" /> 将debug改为false

2、在BundleConfig.cs加上这段话 BundleTable.EnableOptimizations = true;

将config里面debug=false改一下，运行浏览器试试效果

看到只有一个请求，这是否就是我们所要的的呢？

F12打开谷歌开发工具，response看到 a.css b.css里面文件合并在一起

6、这样子做好处：减少http请求，缩短响应时间，提高网页速度，起到优化网站的作用。当然好处不止这些……

转载于:https://www.cnblogs.com/walleyekneel/p/4118855.html

mvc4开篇之BundleConfig（1）相关推荐

operamasks-ui2.0 +MVC4.0+EF5.0实战之一开篇及布局控件介绍
两年前,曾打算自己开发一个web开发框架,把部门.人员.权限.日志作为基本服务加入进去,在其基础上可以做业务快速开发,结果没有坚持下去,仅仅开了个头就夭折了.究其原因,一方面是采用自己完全不熟悉的新技 ...
ASP.NET MVC：利用ASP.NET MVC4的IBundleTransform集成LESS
背景 LESS确实不错,只是每次写完LESS都要手工编译一下有点麻烦(VS插件一直没有安装好),昨天在官方看到了如何用IBundleTransform集成LESS,今天就记录一下. 参考资料:http ...
使用asp.net MVC4中的Bundle遇到的问题及解决办法
背景之前有过使用MVC3的经验,也建过MVC4的基本样例看过,知道有bundle这么一个方法. 近日想建个网站使用MVC4,但是我觉得在基本样例上改不好,有太多无用的东西,所以就建了一个空白的MVC ...
使用MVC4，Ninject，EF，Moq，构建一个真实的应用电子商务SportsStore(一)
如果你已经准备好了开始MVC4的远航,那我们就闲话少说,背起行装,踏上征途吧! 完成SportsStore电子商务平台,你将学会: 1.使用MVC4开发你的应用项目. 2.使用Ninject完成IOC ...
ASP.NET MVC4中用 BundleCollection
来源:http://www.cnblogs.com/madyina/p/3702314.html ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: &l ...
asp.net mvc 应用Bundle（捆绑和微小）压缩技术启用 BundleConfig 配置web.config
从MVC4开始,我们就发现,项目中对Global.asax进行了优化,将原来在MVC3中使用的代码移到了 [App_Start]文件夹下,而Global.asax只负责初始化.其中的BundleCon ...
webapi输出炜json_.Net基于MVC4 Web Api输出Json格式实例
本文实例讲述了.Net基于MVC4 Web Api输出Json格式的方法,分享给大家供大家参考.具体实现方法如下: 1.Global 中增加json输出 GlobalConfiguration.Con ...
MVC4 jquery 样式主题用法(案例)
开发工具:VS2012 MVC版本:MVC4 MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限, ...
[翻译]ASP.NET MVC4新特性之脚本压缩和合并
2019独角兽企业重金招聘Python工程师标准>>> [翻译]ASP.NET MVC4新特性之脚本压缩和合并目前主流浏览器限制客户端对同一域名只能同时发起6(PS:原文如此)个H ...
基于MVC4+EasyUI的Web开发框架经验总结（11）--使用Bundles处理简化页面代码
基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件 ...

mvc4开篇之BundleConfig（1）

mvc4开篇之BundleConfig（1）相关推荐

最新文章

热门文章