现如今都提倡敏捷开发，快速开发，但是再要求速度的同时，还得保证质量！前端我是没办法，毕竟是直接要面向用户的，但是后台，解决方案那就多了，诸如extjs，bootstrap，kendoui，都可以解决。但是使用了这些第三方的东西，我们的后台是漂亮了，效果也炫了，新的问题就来了，大量的引用js、css。
这是我用bootstrap、kendoui搭的一个标准后台，代码非常简洁，但是引用了很多样式和js，加载完这个页面发送了又16个请求，耗时1.36s。
有没有一种方法可以把这些js和css合并起来并且压缩一下呢？这样我们的后台效果不就更好了吗？当然有，.net mvc自带的bundle功能。我们先看使用了该功能之后是什么效果
很明显，请求数减少了，响应时间也减少了，那我们来看看bundle到底是如何实现的。
public class BundleConfig
{
// 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/assets/global/plugins/jquery-1.11.0.min.js")); // The Kendo JavaScript bundle
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz
"~/Scripts/kendo/cultures/kendo.culture.zh-CN.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js"
)); // Add CSS bundle
bundles.Add(new StyleBundle("~/bundles/upcss").IncludeDirectory("~/css/", "*.css")); // Add JS bundle
bundles.Add(new ScriptBundle("~/bundles/upjs").Include("~/js/jquery.js"
, "~/js/vendor/jquery.ui.widget.js"
, "~/js/tmpl.js"
, "~/js/load-image.js"
, "~/js/canvas-to-blob.js"
, "~/js/bootstrap.js"
, "~/js/bootstrap-image-gallery.js"
, "~/js/jquery.iframe-transport.js"
, "~/js/jquery.fileupload.js"
, "~/js/jquery.fileupload-fp.js"
, "~/js/jquery.fileupload-ui.js"
, "~/js/locale.js"));
bundles.Add(new ScriptBundle("~/bundles/upmain").IncludeDirectory("~/js/main", "*.js")); // The Kendo CSS bundle
bundles.Add(new StyleBundle("~/Content/kendocss").Include(
"~/Content/kendo.common-bootstrap.min.css",
"~/Content/kendo.bootstrap.min.css",
"~/Content/kendo.dataviz.min.css"
)); // The Kendo CSS bundle
bundles.Add(new Bundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common-bootstrap.min.css",
"~/Content/kendo/kendo.bootstrap.min.css",
"~/Content/kendo/kendo.dataviz.min.css"
)); 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"));
}
}
首先需要首先需要配置Bundle
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);
AuthConfig.RegisterAuth();
}
}
再全局注册Bundles