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

 更新时间:2017年03月09日 09:36:30   作者:wolfy  
在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数。asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法。这篇文章主要介绍了在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 mvc项目,在App_Start文件夹中你可以看到一个叫做BundleConfig.cs的类,

该类内容如下:

public class BundleConfig
 {
 // For more information on bundling, visit http://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*"));

 // 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 ScriptBundle("~/bundles/bootstrap").Include(
  "~/Scripts/bootstrap.js",
  "~/Scripts/respond.js"));

 bundles.Add(new StyleBundle("~/Content/css").Include(
  "~/Content/bootstrap.css",
  "~/Content/site.css"));
 }
 }

如上代码所示,压缩和合并分两种对象ScriptBundle和StyleBundle。

namespace System.Web.Optimization
{
 //
 // Summary:
 // Represents a bundle that does Js Minification.
 public class ScriptBundle : Bundle
 {
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes a virtual path for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 public ScriptBundle(string virtualPath);
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes virtual path and cdnPath for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 //
 // cdnPath:
 // The path of a Content Delivery Network (CDN).
 public ScriptBundle(string virtualPath, string cdnPath);
 }
}

ScriptBundle有两个构造函数,virtualPath:js文件的虚拟路径,cdnPath:js的网络cdn路径。StyleBundle的构造函数的参数与ScriptBundle相同。

在上面的代码片段中你可以看到

  • jquery-{version}.js:其中version是jquery的版本号,version是一个版本号的占位符。
  • jquery.validate*:*通配符,匹配所有。

上面的代码完成后,需要在Global.asax的Application_start事件中对其注册。

如何使用?

在视图中,通过下面的代码实现对静态文件的引用。

浏览

怎么没起作用呢?Bundle默认在调试的情况下,是没有开启打包压缩的,可以通过下面的2中方式进行开启。

再浏览下

你会发现Jquery-1.10.2.js该文件在请求中已经不存在了,它已经被打包压缩在jquery?v=版本号,这个文件里面了。

另外一种打开打包压缩的方式,在web.config文件中中:

总结

上面就是对Bundle的用法介绍,对静态文件打包压缩可以减少请求次数,资源加载的速度。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • .net core项目中常用的几款类库详解(值得收藏)

    .net core项目中常用的几款类库详解(值得收藏)

    这篇文章主要给大家介绍了关于.net core项目中常用的几款类库的相关资料,文章通过示例代码介绍的非常详细,对大家学习或者使用.net core具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • asp.net Cookie操作类

    asp.net Cookie操作类

    Cookie操作类,本人得还很不错哦。
    2009-12-12
  • ASP.NET 主题的简单配置教程

    ASP.NET 主题的简单配置教程

    主题和css差不多但是他可以提供一些css不能提供的特性,下面为大家介绍下ASP.NET 主题的简单配置,感兴趣的朋友不要错过
    2013-12-12
  • asp.net服务器端指令include的使用及优势介绍

    asp.net服务器端指令include的使用及优势介绍

    将指定文件的内容插入 ASP.NET 文件中,包括网页(.aspx 文件)、用户控件文件(.ascx 文件)和 Global.asax 文件
    2013-04-04
  • ASP.NET Core扩展库之日志功能的使用详解

    ASP.NET Core扩展库之日志功能的使用详解

    这篇文章主要介绍了ASP.NET Core扩展库之日志功能的使用详解,帮助大家更好的理解和学习使用.NET技术,感兴趣的朋友可以了解下
    2021-03-03
  • asp.net(C#)中给控件添加客户端js事件的方法

    asp.net(C#)中给控件添加客户端js事件的方法

    今天做一个输入界面,有一需求根据一个DropDownList选择不同,后面部分出现不同的输入界面,若把响应事件放在服务端去做,得频繁刷页面。就想放在客户来处理显示和隐藏相应的输入界面。
    2010-03-03
  • .NET Core利用BsonDocumentProjectionDefinition和Lookup进行 join 关联查询(推荐)

    .NET Core利用BsonDocumentProjectionDefinition和Lookup进行 join 

    这篇文章主要介绍了.NET Core利用BsonDocumentProjectionDefinition和Lookup进行join关联查询,这里主要介绍一下查询角色的所有用户的例子,文章结合实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • 剖析Asp.Net Web API路由系统---WebHost部署方式

    剖析Asp.Net Web API路由系统---WebHost部署方式

    这篇文章主要介绍了剖析Asp.Net Web API路由系统---WebHost部署方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • 在 .NET Core 中使用 Diagnostics (Diagnostic Source) 记录跟踪信息

    在 .NET Core 中使用 Diagnostics (Diagnostic Source) 记录跟踪信息

    今天给大家讲一下在 .NET Core 2 中引入的全新 DiagnosticSource 事件机制,为什么说是全新呢? 在以前的 .NET Framework 有心的同学应该知道也有 Diagnostics,那么新的 .NET Core 中有什么变化呢?跟随小编一起看看吧
    2021-06-06
  • 如何轻松搭建Windows8云平台的开发环境

    如何轻松搭建Windows8云平台的开发环境

    Windows Store应用是基于Windows 8操作系统的新一代Windows应用程序,其开发平台以及运行模式和以往传统平台略有不同。为了帮助更多开发人员加入到Windows Store应用开发行列,本篇将介绍如何在Windows Azure云平台搭建Windows8应用开发环境,本篇介绍的方法适合未安装Windows8操作系统,使用Mac或者Linux平台的开发人员参考阅读。
    2013-02-02

最新评论