ASP.NET MVC4之js css文件合并功能(3) MVC4增加了一些新功能,接下来,我们来研究下MVC4中的新增功能,我们在新建一个MVC4项目的时候,会发现在项目下多出了一个App_Start文件夹,文件夹下面有4个文件,BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs,其中BundleConfig.cs文件就是我们这一节要讲的的文件。 众所周知,浏览器在向服务器发送请求的时候,请求的文件连接数量是有限制的。使用BundleConfig可以将多个文件请求和并成一个请求,去除文件中的一些注释,空白,压缩文件的大小,自动合并压缩优化代码,缩短响应时间,提高网页速度,起到优化网站的作用。 1.定义分组 创建MVC4项目后,我们会在global.asax文件中的Application_Start()方法中看到如下代码,起到注册作用 BundleConfig.RegisterBundles(BundleTable.Bundles); BundleConfig.cs代码: public class BundleConfig { // 有关 Bundling 的详细信息,请访问 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 ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); // 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好 // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); } } BundleCollection是一个集合,用于将绑定规则添加到集合中,使用Add方法. bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); new ScriptBundle("~/bundles/jquery")定义一个分组名称,Include表示这个分组下具体包括的文件。 version参数代表版本号 ,*代表所有,这两个是可以理解为通配符。 以上代码表示创建一个~/bundles/jquery分组,该分组指向的文件为scripts文件夹下的jquery-1.7.1.js文件。 如果scripts文件夹下有jquery-1.7.1.js,jquery-1.6.1.js,则会指向这两个文件。 同样,bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));表示创建了一个~/Content/css分组,指向~/Content/site.css文件. 2.使用分组 分组已经定义好,我们接下演示怎样使用。 如果在页面中使用scripts,可以使用@Scripts.Render("~/bundles/jquery")方法,参数为分组名称 如果在页面中使用css,可以使用@Styles.Render("~/Content/css")方法,参数为分组名称. 可以看下VIEWS文件夹下的Shard文件夹的_Layout.cshtml文件