码迷,mamicode.com
首页 > 其他好文 > 详细

Bundle捆绑压缩技术

时间:2017-05-25 13:44:22      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:bootstra   route   代码   多个   under   style   mode   log   new   

Bundle捆绑压缩技术由命名空间System.Web.Optimization中的类提供。顾名思义,这些类是用来优化Web页面性能的,它们通过压缩文件大小,捆绑文件(把多个文件合成一个下载文件)来实现优化。

一、在空MVC项目中添加Bundle捆绑

 1.新建一个空MVC项目,命名为MVCBundleDemo

技术分享

2.使用NuGet下载jquery和jquery validation以及bootstrap

技术分享

技术分享

 

3.通过NuGet下载Microsoft.AspNet.Web.Optimization

技术分享

修改View下面的Web.config文件,添加System.Web.Optimization命名空间引用,使得所有View视图都可以使用这个命名空间里的类

技术分享

 

4.在App_Start文件夹下新建BundleConfig类,代码如下:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
            // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

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

5.在Global.asax文件中注册BundleConfig,代码如下:

 public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);//注册BundleConfig
        }
    }

6.新建Home控制器,右键Index方法,添加视图,勾选使用分布页,如下图:

技术分享

vs工具会自动创建Shared文件夹以及_Layout.cshtml布局页

 7.查看_Layout.cshtml布局页中css和js引用

技术分享

技术分享

二、在节点中放置js脚本

   因为布局页中jquery引用是放在文本最后的,在视图中添加js,就会出现一个问题,js脚本出现在jquery引用前,导致js脚本无效。解决这个问题的方法是将js脚本放置在scripts节点中(布局页中定义的@RenderSection("scripts", required: false))。

@{
    ViewBag.Title = "Index";
}


<h2>Index</h2>
<div>
    <input type="button" id="btnUserList" value="获取用户信息" />
    <div id="divUserList"></div>
</div>
@*节点中放置js代码*@
@section Scripts{
  <script src="~/Scripts/App/Ajax.js"></script>
}

 

Bundle捆绑压缩技术

标签:bootstra   route   代码   多个   under   style   mode   log   new   

原文地址:http://www.cnblogs.com/marshhu/p/6903070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!