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

程序员文章站 2022-10-12 10:34:24

前言介绍本文的正式内容之前先引用《淘宝技术这十年》中一段话，对web前端稍微有点常识的人都应该知道，浏览器下一步会加载页面中用到的css、js（javascript）、...

前言

介绍本文的正式内容之前先引用《淘宝技术这十年》中一段话，对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);
 }
}

scriptbundle有两个构造函数，virtualpath：js文件的虚拟路径，cdnpath：js的网络cdn路径。stylebundle的构造函数的参数与scriptbundle相同。

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