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. html 页面中显示单行省略号

    <!DOCTYPE html>   <html>   <head>   <meta charset="UTF-8">   <t ...

  2. API测试－Super Test

    框架选择 Super Test:基本的HTTP请求,返回判断 Chai:对返回的结果进行判断 grunt:集成jenkins grunt-mocha-test:grunt任务 Jenkins环境配制 ...

  3. [置顶]PADS PCB功能使用技巧系列之NO.003- 如何统一修改元件标号字体？

    LAYOUT完毕后进行元件标号字体调整时,你是否试图用Select Document+Select All来选定所有标号?可结果却并不令人满意. (1)在Layout中,选择菜单栏Edit -> ...

  4. 基于EasyUi ComBotree树修改 父节点选择问题

    本人在使用 Easy UI 期间发现了一个不太适合项目的bug,可能也不算bug把 . 毕竟不同项目背景 取舍不同. 我在做网元树选择的时候  发现当选取父节点后,子节点都会被选择  返回  .但是如 ...

  5. java——多线程——内部类共享同一个外部类对象的成员变量

    public class Shop { public static void main(String[] args) { Outer o=new Outer(); Thread t1=o.getSal ...

  6. Resellerclub –Cpanel 主机中如何设置 index 缺省首页

    管理面板,点击[文件管理器],如图: ],如图 1. 进入 cPanel 管理面板,点击[文件管理器],如图: 选中[主目录] 显示隐藏文件],如图: ],如图 2. 选中[主目录]和[显示隐藏文件] ...

  7. SqlServerProxy的一些资料

    SqlServerProxy的一些资料 下载地址:http://files.cnblogs.com/files/lyhabc/SqlServerProxy.rar 1.特性及实现原理 SqlServe ...

  8. linux 2.6 驱动笔记（三）

    驱动的并发与应用的并发实现一样,以信号量为例,修改基本字符驱动代码如下: 1. 增加sem定义 struct globalmem_dev{ struct cdev cdev; /*linux 2.6 ...

  9. 人人都是 DBA（IV）SQL Server 内存管理

    SQL Server 的内存管理是一个庞大的主题,涉及特别多的概念和技术,例如常见的 Plan Cache.Buffer Pool.Memory Clerks 等.本文仅是管中窥豹,描述常见的内存管理 ...

  10. Web 数据存储总结

    随着Web应用程序的出现,也产生了对于能够在客户端上存储用户信息能力的要求.这个问题的第一个解决方案是以cookie形似出现的.网景公司在一份名为“Persistent Client State: H ...