MVC（BundleConfig） 压缩捆绑技术，减少页面请求，优化客户体验。



BundleConfig类，内部设计

using System.Web;
using System.Web.Optimization;

namespace TYZ.UI
{
    public class BundleConfig
    {
        // 有关绑定的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            //:注释：捆绑压缩技术：将多个js文件，或多个css文件打包成一个文件，并去除空格，达到压缩的目的，
            //这样可以有效的减少页面请求次数，达到很好的优化效果，在这里，可以将不同类别需求的页面分类，
            //捆绑为不同的压缩包，在不同的类别页面引入不同的压缩包，这样达到了最优化，最流畅的页面体验。
            //===============================js文件的压缩包===========================================
            //用于单独只需要引用js的页面
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-1.10.2.min.js"
                ));
            用于具有jquery验证的页面
            bundles.Add(new ScriptBundle("~/bundles/js_validate").Include(
               "~/Scripts/jquery-1.10.2.min.js",
               "~/Scripts/jquery.validate.min.js"
               ));
            用于具有需要渲染的页面
            bundles.Add(new ScriptBundle("~/bundles/js_render").Include(
             "~/Scripts/jquery-1.10.2.min.js",
             "~/Scripts/jsrender.min.js"
             ));

            //===============================css文件压缩包===============================================
            用于具有分页的页面
            bundles.Add(new StyleBundle("~/bundles/css_page").Include(
                      "~/Content/page.css"
                      ));
        }
    }
}

页面使用方式

@{
    ViewBag.Title = "学生信息列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/JW_System/StudentList.js"></script>
@Styles.Render("~/bundles/css_page");
<h2>学生信息管理</h2>
<a href="@Url.Content("/jw/s/Edit")">添加</a>
<table>
    <thead>
        <tr>
            <td>序号</td>
            <td>学号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>是否删除</td>
            <td>是否启用</td>
            <td>创建人编号</td>
            <td>创建时间</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody id="pr"></tbody>
</table>
<div id="pageget" class="pagelist"></div>
@{
ViewBag.Title = "学生信息列表";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/JW_System/StudentList.js"></script>
@Styles.Render("~/bundles/css_page");
<h2>学生信息管理</h2>
<a href="@Url.Content("/jw/s/Edit")">添加</a>
<table>
<thead>
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>是否删除</td>
<td>是否启用</td>
<td>创建人编号</td>
<td>创建时间</td>
<td>操作</td>
</tr>
</thead>
<tbody id="pr"></tbody>
</table>
<div id="pageget" class="pagelist"></div>
重要步骤，以及核心对比

配置文件中，默认是debug模式，在浏览页面的时候，是单个文件形式，没有捆绑模式

<compilation debug="true" targetFramework="4.5"/>

效果如下：

将配置文件中，

<compilation debug="false" targetFramework="4.5"/>,再浏览页面，就可以看到捆绑的效果：================请求的次数不同，请求文件的时间不同，对比就能看出，捆绑压缩达到的效果；