B\S备忘录29——MVC3下的JS、CSS合并

来源：互联网发布：中国税务网络大学编辑：程序博客网时间：2024/06/06 04:42

既然干过优化的事情，那估计就要一条道干到黑了。

这次主要是对前台页面的优化，浏览器在向服务器发送请求的时候，请求的文件连接数量是有限制的。使用BundleConfig可以将多个文件请求和并成一个请求，去除文件中的一些注释，空白，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度，起到优化网站的作用。

有些JS比如Jquery-easiui，一般下载下来之后会有两个文件，一个是jquery-easiui.js，一个是jquery-easiui.min.js，这个带着min的js就是经过了合并后的js文件。在使用方面，不带min的js是在项目开发的时候进行调试用的，带min的js是我们的网站调试完成了，发布时候引用，这样就会提高页面打开速度。

再说回来这个BundleConfig。

这个是MVC4中的新增功能，但是我们开发的时候还是用的MVC3，怎么使用呢？

首先添加System.Web.Optimization，WebGrease这两个引用，没有的话只能去MVC4的项目中引了- -。

然后我们自己写一个类BundleConfig

using System.Web;using System.Web.Optimization;namespace BundleConfig{    public class BundleConfig    {        // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725        public static void RegisterBundles(BundleCollection bundles)        {            bundles.Add(new ScriptBundle("~/Content/Scripts ").Include(                        "~/Scripts/jquery-{version}.js"));            bundles.Add(new StyleBundle("~/Content/demo").Include("~/Content/site.css"));BundleTable.EnableOptimizations = true;        }    }}<span style="font-family: KaiTi_GB2312; background-color: rgb(255, 255, 255);"> </span>

bundles.Add(newScriptBundle("~/Content/Scripts ").Include(

"~/Scripts/jquery-{version}.js"));

这句话是用来拼接JS的，将.Include()中的路径改为自己的页面使用的JS路径。多个JS路径之间用逗号隔开。例如：

bundles.Add(new ScriptBundle("~/Content/Scripts").Include(                        "~/Content/jquery-easyui-1.3.2/jquery.easyui.min.js",                        "~/Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js",                        "~/Content/jquery.balloon.js",                        "~/Scripts/EasyuiLayout.js",                        "~/Scripts/Logout.js"));

CSS也是同理的，例如这样：

bundles.Add(new StyleBundle("~/Content/demo").Include(                "~/Content/jquery-easyui-1.3.2/demo/demo.css",                "~/Content/jquery-easyui-1.3.2/themes/default/easyui.css",                "~/Content/jquery-easyui-1.3.2/themes/icon.css"));

然后，我们在Global.asax.cs，Application_Start这个方法中，加两句话。

 protected void Application_Start() {     BundleTable.EnableOptimizations = true;<span style="white-space:pre"></span>//这一句，设置合并为可用     AreaRegistration.RegisterAllAreas();     // 默认情况下对 Entity Framework 使用 LocalDB     Database.DefaultConnectionFactory = new SqlConnectionFactory(@"Data Source=(localdb)\v11.0; Integrated Security=True; MultipleActiveResultSets=True");     RegisterGlobalFilters(GlobalFilters.Filters);     RegisterRoutes(RouteTable.Routes);     BundleConfig.RegisterBundles(BundleTable.Bundles);<span style="white-space:pre"></span>//和这一句，注册合并的类            }

这样我们就可以在页面调用这个合并的方法了。

<head>    <meta charset="UTF-8">    <title>ITOO</title>    @System.Web.Optimization.Styles.Render("~/Content/demo")    @System.Web.Optimization.Scripts.Render("~/Content/Scripts")</head>

貌似我们的JS和CSS不多的情况下，这个东西还是没多大的作用的- -。

以上

0 0