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. 《LINUX内核设计与实现》读书笔记之第五章

    第五章——系统调用 5.1 与内核通信 1.为用户空间提供一种硬件的抽象接口 2.保证系统稳定和安全 3.除异常和陷入,是内核唯一的合法入口. API.POSIX和C库 关于Unix接口设计:提供机制 ...

  2. sqlserver 2008 数据库表结构脚本及数据导出

    sqlserver2008  在xp上尝试安装了 sqlserver2008 express版本,但是和公司的sqlserver2008 r2 版本不兼容.升级的时候,出了问题.所以换了中思路,将数据 ...

  3. WPF 显示GIF动画

    简单的通过GifBitmapDecoder解析GIF图片,获取gif帧数和每一帧数据,然后通过时间切换显示,效果如下: 代码如下: namespace GIfImageApplication { pu ...

  4. STAF no JSTAF in java.library.path 的终极解决办法

    最近两天在研究利用STAF 实现程序更新包的自动部署测试.运行Demo代码时遇到一个坑.我的安装路径是默认的.C:\STAF\samples\demo在命令行窗口用执行命令:java STAFDemo ...

  5. Linux内核--网络栈实现分析（九）--传输层之UDP协议（下）

    本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7549340 更多请查看专栏,地 ...

  6. mac下配置openCV

    预备工作: 1.下载Homebrew  在Terminal中输入: ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)" ...

  7. SQLSERVER2014中的新功能

    SQLSERVER2014中的新功能 转载自:http://blog.csdn.net/maco_wang/article/details/22701087 博客人物:maco_wang SQLSER ...

  8. 解决Django站点admin管理页面样式表（CSS style）丢失

    参照这篇教程激活完django自带服务器的admin管理页面后,照着教程所描述的那样,尝试打开http://127.0.0.1:8000/admin/,发现自己的浏览器显示如下 很明显可以看出,虽然业 ...

  9. mongodb（map-reduce）

    下例中给出mongoose的一个mapreduce例子,参考mongoose官网. 基本概念: Map函数 接受一个键值对(key-value pair),产生一组中间键值对.MapReduce框架会 ...

  10. 你写的return null正确吗？

    上次一篇“你写的try…catch真的有必要吗”引起了很多朋友的讨论.本次我在code review又发现了一个问题,那就是有人有意无意的写出了return null这样的代码,例如: public ...