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基本或者其他内容更丰富的模板，bundle应该已经自动配置上了，因为本身会有jquery和jquery ui的引用，这两项引用会用到bundle。

就简单说一下要点吧。

首先在项目的app_start文件夹中，会有一个bundleconfig.cs文件：

这里面写了所有需要bundle的内容，可以自行设置：

其中的bundles.add是在向网站的bundletable中添加bundle项，这里主要有scriptbundle和stylebundle，分别用来压缩脚本和样式表。用一个虚拟路径来初始化bundle的实例，这个路径并不真实存在，然后在新bundle的基础上include项目中的文件进去。具体的include语法可以查阅上面提供的官方简介。

然后对bundle的注册是在项目根下的global.asax文件中，这个文件中的application_start是网站程序的开始，里面注册了网站各种初始化的内容，其中就包括对bundletable的bundle添加：

默认情况下，bundle是会对js和css进行压缩打包的，不过有一个属性可以显式的说明是否需要打包压缩：

bundletable.enableoptimizations = true;

如果将其设为false，那么就会和下面说的debug=true时的情况相同了。

在使用时，在相应位置调用scriptrender和stylerender的render方法：

最终用户页面即可达到效果打包压缩效果。

有一个地方主要注意，在web.config中，当compilation编译的debug属性设为true时，表示项目处于调试模式，这时bundle是不会将文件进行打包压缩的，页面中引用的js和css会分散原样的展示在html中，这样做是为了调试时查找问题方便（压缩以后就复杂了）

最终部署运行时，将debug设为false就可以看到js和css被打包和压缩了。

=============

使用bundle的关键在于要向asp.net中的bundletable注册bundle。

如果要在asp.net webform中使用bundle，需要在新建项目时选择.net framework 4.5，最好使用模板网站新建，这样就可以直接看到bundle了。

 以上就是本文的全部内容，希望对大家的学习有所帮助。