JS/CSS文件的打包合并（Bundling）及压缩（Minification）是指将多个JS或CSS文件打包合并成一个文件，并在网站发布之后进行压缩，从而减少HTTP请求次数，提高网络加载速度和页面解析速度。压缩功能实现了对javascript脚本和CSS进行压缩的功能，它能够去除脚本或样式中不必要的空白和注释，同时能够优化脚本变量名的长度。

　　在ASP.NET MVC 4中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现。

　　1. 新建ASP.NET MVC 4空项目，引用System.Web.Optimization

　　1>、新建ASP.NET MVC 4空项目：

　　2>、引用System.Web.Optimization

　　通过NuGet添加对System.Web.Optimization的引用：

　　2. ASP.NET MVC 4项目使用System.Web.Optimization

　　1>、BundleConfig.cs

　　在类文件BundleConfig.cs中配置需要捆绑的JS及CSS文件。

using System.Web;

using System.Web.Optimization;

namespace MvcExample

{

    public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

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

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

        }

    }

}

　　2>、_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/jquery")

    @RenderSection("scripts", required: false)

</head>

<body>

    @RenderBody()

</body>

</html>

　　3>、Global.asax

　　在中添加代码：

BundleConfig.RegisterBundles(BundleTable.Bundles);
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

namespace MvcExample

{

    // Note: For instructions on enabling IIS6 or IIS7 classic mode,

    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication

    {

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

        }

    }

}

　　4>、Web.config

　　在根目录及Views文件夹下的Web.config中添加命名空间引用：

<add namespace="System.Web.Optimization"/>

　　3. ASP.NET MVC 4项目JS/CSS打包压缩效果

　　1>、查看加载原始JS/CSS效果

　　完成上面的项目代码之后，运行查看源文件：

　　2>、查看捆绑压缩JS/CSS效果

　　修改根目录下Web.config ，将debug设置为false。

<compilation debug="false" targetFramework="4.0" />

　　在Firebug中查看css文件压缩后的加载内容，可以看出原始css文件中的注释及空白换行均被删除。

　　启用JS/CSS文件压缩合并，除了可以在Web.config中配置，也可以在BundleConfig.cs或Global.asax中添加代码：

BundleTable.EnableOptimizations = true;

　　BundleConfig.cs

using System.Web;

using System.Web.Optimization;

namespace MvcExample

{

    public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

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

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

            BundleTable.EnableOptimizations = true;

        }

    }

}
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

namespace MvcExample

{

    // Note: For instructions on enabling IIS6 or IIS7 classic mode,

    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication

    {

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

            BundleTable.EnableOptimizations = true;

        }

    }

}

　　4. 参考资料

　　http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩的更多相关文章

  1. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  2. JS&CSS文件请求合并及压缩处理研究（三）

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...

  3. JS&CSS文件请求合并及压缩处理研究（一）

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...

  4. JS&CSS文件请求合并及压缩处理研究（四）

    本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualSt ...

  5. JS&CSS文件请求合并及压缩处理研究（二）

    上篇交待了一些理论方面的东西,并给出了另外一种解决方案的处理流程.本篇将根据该处理流程,开始代码方面的编写工作. 1,打开VS,新建ASP.NET MVC Web项目,项目类型选择空.名称为 Mcmu ...

  6. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  7. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  8. (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...

  9. ASP.NET MVC 4 RC的JS/CSS打包压缩功能

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

随机推荐

  1. python基础整理笔记（八）

    一. python反射的方式来调用方法属性 反射主要指的就是hasattr.getattr.setattr.delattr这四个函数,作用分别是检查是否含有某成员.获取成员.设置成员.删除成员. 此外 ...

  2. angularjs 1.x $q模块使用

    什么是$q $q是angularjs1.x中内置服务,在需要使用时可以注入它. angular.module('app').controller('myController', function my ...

  3. 写字节流转换String 代码示例

    public void pushEmployee(EmpPushToTianFangRequest request){ try { StringWriter sw = new StringWriter ...

  4. MyEclipse 2015 Stable 2.0安装包及破解工具下载

    MyEclipse 2015 Stable 2.0安装包及破解文件下载 之前一直在用myeclipse10.7,后来发现10.7版本有点老了,所以就换了2015稳定版的myeclipse,里面附带了破 ...

  5. CA Loves GCD (BC#78 1002) (hdu 5656)

    CA Loves GCD  Accepts: 135  Submissions: 586  Time Limit: 6000/3000 MS (Java/Others)  Memory Limit: ...

  6. JavaScript this用法总结

    在JavaScript中,this关键字可以说是最复杂的机制之一.对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题. 1.this的作用 为什么要在JavaScript中使用this呢 ...

  7. IOS 获取当前对象所在的VC

    id next = [self nextResponder] ; while (next != nil) { next = [next nextResponder]; if ([next isKind ...

  8. IOS9 新加关键字 nullable、nonnull、null_unspecified、null_resettable

    #import "ViewController.h" @interface ViewController () @property(nonatomic,nullable)NSStr ...

  9. 无法将类型为“System.Decimal”的对象强制转换为类型“System.Char[]”。

    在用微软的SSIS操作ORACLE 数据源的时候碰到以下报错信息: [ADO NET Destination [13455]] 错误: 数据插入期间出现异常,从提供程序返回的消息为:无法将类型为&qu ...

  10. 《与mysql零距离接触》视屏学习笔记

    1.数据表的增删改查操作(crud): 对于表: 增:create  table  XXXX 删:drop table XXXX 改:alter table XXXX rename to XXXX 查 ...