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

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

2020-04-26 12:12wolfy ASP.NET教程

在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的类，

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

该类内容如下：

				?

									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);

									 }

									}