Asp.Net MVC4 Bundle捆绑压缩技术

很高兴，最近项目用到了Asp.Net MVC4 + Entity Framework5，发现mvc4加入了Bundle、Web API等技术，着实让我兴奋，以前是用第三方的，这里主要说说Bundle技术。

很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲，别小瞧用上了你会发现他的好处：

将多个请求捆绑为一个请求，减少服务器请求数

没有使用Bundle技术，debug下看到的是实际的请求数与路径

使用Bundle技术，并且拥有缓存功能
调试设置为Release模式并按F5或修改web.config，就可以看到合并与压缩的效果

压缩javascript，css等资源文件，减小网络带宽，提升性能

后台配置

　　MVC4在架构上有些变动，简化了原来的Global.asax，增加了一些静态的配置文件在App_Start下面，留意下BundleConfig.cs，顾名思义是Bundle的配置，所有它的配置在这里进行就可以了，当然也可以单独的配置文件。

    public class BundleConfig{// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725public 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*"));// Use the development version of Modernizr to develop with and learn from. Then, when you're// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/jquery.ui.core.css","~/Content/themes/base/jquery.ui.resizable.css","~/Content/themes/base/jquery.ui.selectable.css","~/Content/themes/base/jquery.ui.accordion.css","~/Content/themes/base/jquery.ui.autocomplete.css","~/Content/themes/base/jquery.ui.button.css","~/Content/themes/base/jquery.ui.dialog.css","~/Content/themes/base/jquery.ui.slider.css","~/Content/themes/base/jquery.ui.tabs.css","~/Content/themes/base/jquery.ui.datepicker.css","~/Content/themes/base/jquery.ui.progressbar.css","~/Content/themes/base/jquery.ui.theme.css"));}}

这里大家可以按模块化去配置，我们看到的下面的Url对应的就是上面的bundles.Add(...) 所增加的js、css的virtualPath

需要注意的是不同virtualPath 增加的相同的资源文件，会被重复加载！

前台调用

对于公共的资源文件，通常我们都会放到_Layout.cshtml (webform中的母板页) 文件中

　　Script文件引用：@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
　　 CSS文件引用： @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>@ViewBag.Title - My ASP.NET MVC Application</title><link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /><meta name="viewport" content="width=device-width" />@Styles.Render("~/Content/css")@Styles.Render("~/Content/themes/base/css")<link href="/Content/test.css" rel="stylesheet" type="text/css" /></head><body><div id="body">...</div>@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/jqueryui")@RenderSection("scripts", required: false)</body>
</html>

正则匹配需要的，过滤不需要的

public static void RegisterBundles(BundleCollection bundles)
{            bundles.IgnoreList.Clear();bundles.IgnoreList.Ignore("*.debug.js");bundles.IgnoreList.Ignore("*.min.js");bundles.IgnoreList.Ignore("*-vsdoc.js");bundles.IgnoreList.Ignore("*intellisense.js");bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); //匹配jquery版本
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*",  //匹配文件名前缀为jquery.unobtrusive"~/Scripts/jquery.validate*"));...
}

使用CDN

bundles.UseCdn = true; //使用CDN
string jqueryCdn = "http://code.jquery.com/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include(
"~/Scripts/jquery-{version}.js"));

当cdn服务器挂了或不能访问了，这里就会选择本地的资源文件，debug下mvc 会让我们看到他原来的面具，这点非常好利于我们调试。　　

转载于:https://www.cnblogs.com/weishao/archive/2013/04/12/3015005.html

Asp.Net MVC4 Bundle捆绑压缩技术相关推荐

Bundle捆绑压缩技术
Bundle捆绑压缩技术由命名空间System.Web.Optimization中的类提供.顾名思义,这些类是用来优化Web页面性能的,它们通过压缩文件大小,捆绑文件(把多个文件合成一个下载文件)来实 ...
[翻译]ASP.NET MVC4新特性之脚本压缩和合并
2019独角兽企业重金招聘Python工程师标准>>> [翻译]ASP.NET MVC4新特性之脚本压缩和合并目前主流浏览器限制客户端对同一域名只能同时发起6(PS:原文如此)个H ...
ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存
ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存原文:ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 ASP.Net MVC4+Memc ...
.ne中的控制器循环出来的数据如何显示在视图上_Web程序设计-ASP.NET MVC4数据库操作实例...
ASP.NET MVC4数据库操作实例之前文章介绍了MVC4与Pure框架结合进行的网页设计过程中如何定义控制器.方法.模型.视图等.并使用实例进行了简单说明.本文将在此基础上进一步说明如何使用MV ...
Asp.Net MVC4入门指南（3）：添加一个视图
在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,干净优雅的封装生成返回到客户端浏览器HTML的过程. 您将创建一个视图模板文件,其中使用了ASP.NET MVC ...
Asp.net MVC4.0（net4.5）部署到window server 2003上的解决方案
把Asp.net MVC4.0(net framework4.5) 部署到window server 2003上的解决方案最近做了一个Web项目,也没多想就用了Asp.net MVC4.0 ,MVC ...
文件在线压缩技术
客户有时会有这样的需求:把服务器上的某个文件和文件夹下载到本地,我们的解决方法是使用在线压缩技术.就是把文件先在服务器上压缩,创建一个.ZIP,然后下载到本地. 网上提供了原代码,但是有些不足之处.第 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后 ...
ASP.NET MVC4中用 BundleCollection
来源:http://www.cnblogs.com/madyina/p/3702314.html ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: &l ...
ASP.NET MVC4 部分视图
ASP.NET MVC4 部分视图 2014-10-24 16:48 by 易code, 2663 阅读, 1 评论, 收藏, 编辑 [部分视图] ASP.NET MVC 里的部分视图,相当于 Web ...

Asp.Net MVC4 Bundle捆绑压缩技术

Asp.Net MVC4 Bundle捆绑压缩技术相关推荐

最新文章

热门文章