ASP.NET MVC 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")

时间: 2016-04-07

Asp.net MVC下使用Bundle合并、压缩js与css文件详解

前言 介绍本文的正式内容之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件.但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样,一般是4-6个.Bundle是ASP.NET 4.5中的一个新特性,可 用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多

使用asp.net MVC4中的Bundle遇到的问题及解决办法分享

背景    之前有过使用MVC3的经验,也建过MVC4的基本样例看过,知道有bundle这么一个方法. 近日想建个网站使用MVC4,但是我觉得在基本样例上改不好,有太多无用的东西,所以就建了一个空白的MVC的程序,然后自己写需要的东西, 将程序的目标框架从4.5降到了4.0(我使用的是VS2013),问题就来了. 问题及解决办法 1.降了目标框架之后,vs报一个警告:NuGet程序包是使用不同于当前目标框架的目标框架安装的,需要更新System.Web.Http,之前有用过NuGet, 但是只是

ASP.NET MVC下Bundle的使用方法

ASP.NET MVC中Bundle是用于打包捆绑资源的(一般是css和js),它是在全局文件Global.asax.cs中注册Bundle,而注册的具体实现默认是在App_Start文件夹的BundleConfig.cs中 public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); Filt

ASP.NET MVC中使用Bundle打包压缩js和css的方法

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍

很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle.Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术. 很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处: 将多个请求捆绑为一个请求,减少服务器请求数 没有使用Bundle技术,debug下看到的是实际的请求数与路径 使用Bundle技术,并且拥有缓存功能调试设置为Release模式并按F5或修改web

ASP.NET MVC 4 捆绑和缩小实例介绍

在 ASP.NET MVC 4 中可捆绑多个 css 和 js 文件以减少HTTP请求,并对 css 和 js 文件进行压缩(缩小),这样可提高网站的加载速度.我们选取博客园的 css 文件来看看,在 ASP.NET MVC 4 前,我们引入 css 方法如下: 复制代码 代码如下: <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <link

详解Asp.Net MVC的Bundle捆绑

大多数浏览器会对同一域名的请求限制请求数量,一般是在8个以内.每次最多可以同时请求8个,要是资源多于8个,那么剩下的就要排队等待请求了.所以为了提高首次加载页面的速度.提高请求并发请求数量,降低请求次数就是一个很重要的点. Bundle Asp.Net MVC4和.NET Framework4.5提供了支持捆绑和压缩的新类库System.Web.Optimization. 该类库提供了如下特性: 捆绑-将多个资源文件(javascript,css)合并成一个单独的文件,但是合并成的单独文件必须是

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享

开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用户的体验已经需要越来越注重,这次我们是左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭,因为他们会是一个iframe 工欲善其事必先利其器.需要用到以下工具. Visual Studio 2012 您可以安装MVC4 for vs2010用VS2010来开发,但是貌似你将不能使用EF5.0将会是EF4.4版本,但这没有多大的关系. MVC4将挂载在.NET Framework4.5上. 好

详解ASP.NET Core 中间件之压缩、缓存

前言 今天给大家介绍一下在 ASP.NET Core 日常开发中用的比较多的两个中间件,它们都是出自于微软的 ASP.NET 团队,他们分别是Microsoft.AspNetCore.ResponseCompression 和 Microsoft.AspNetCore.ResponseCaching , 下面让我们一起看看的功能以及如何去使用吧. Getting Started Microsoft.AspNetCore.ResponseCompression Microsoft.AspNetCo

推荐8项提高 ASP.NET Web API 性能的技术

在本文中,我将介绍8项提高 ASP.NET Web API 性能的技术. 1) 使用最快的 JSON 序列化工具 JSON 的序列化对整个 ASP.NET Web API 的性能有着关键性的影响.在我的一个项目里,我从JSON.NET 序列化工具转到了ServiceStack.Text有一年半了. 我测量过,Web API 的性能提升了20%左右.我强烈建议你去尝试一下这个序列化工具.这里有一些最近的流行序列化工具性能的比较数据. 来源:theburningmonk 更新: 似乎It seams

ASP.NET Core中预压缩静态文件的方法步骤

前言 Web应用程序的优化是非常重要,因为使用更少的CPU,占用更少的带宽可以减少项目的费用. 在ASP.NET Core中我们可以很容易的启用响应压缩,但是针对预压缩文件,就需要做一些额外的功能了. 这篇博客文章展示了如何在ASP.NET Core中预压缩静态文件. 下面话不多说了,来一起看看详细的介绍吧 为什么需要预压缩文件? 虽然在从服务器请求文件时, 我们可以动态压缩文件,但这意味这Web服务器需要做更多的额外工作. 其实只有在新的应用程序部署时才会更改要压缩的文件. 越好的压缩效果需要

ASP.NET MVC4异步聊天室的示例代码

本文介绍了ASP.NET MVC4异步聊天室的示例代码,分享给大家,具体如下: 类图: Domain层 IChatRoom.cs using System; using System.Collections.Generic; namespace MvcAsyncChat.Domain { public interface IChatRoom { void AddMessage(string message); void AddParticipant(string name); void GetM

基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览 )

基于ASP.Net +easyUI框架上传图片,判断格式+实现即时浏览,具体内容如下 <div> 选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="fil