首页 > 代码库 > Bundle捆绑压缩技术
Bundle捆绑压缩技术
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=http://www.mamicode.com/"获取用户信息" /> <div id="divUserList"></div></div>@*节点中放置js代码*@@section Scripts{ <script src=http://www.mamicode.com/"~/Scripts/App/Ajax.js"></script>}
Bundle捆绑压缩技术
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。