MVC4的bundling功能简介

比同MVC3，MVC4框架能直接看到的最大的改变就是bundling，（Web API虽然和MVC4安装包一起发布，但我不把它归入MVC4）关于这个的详情，大家有时间的话可以看看这个：

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

没时间的话就花几分钟看一下本文即可。

最最简单的说，bundling功能就是把多个js文件或者css文件合并成一个，并且对它们做压缩处理，显而易见，这样的好处就是提高了网站的效率。例如我的bundling设置：

        // For more information on Bundling, visit 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*"));

            bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
                        "~/Scripts/knockout-{version}.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            //所有的js
            bundles.Add(new ScriptBundle("~/bundles/js_all").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-ui-{version}.js",
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*",
                "~/Scripts/knockout-{version}.js",
                "~/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.*"));

            //所有的css
            bundles.Add(new StyleBundle("~/Content/css_all").Include(
                "~/Content/site.css",
                "~/Content/themes/base/jquery.ui.*"));
        }

再在母版页中加入：

    @Styles.Render("~/Content/css_all")
    @Scripts.Render("~/bundles/js_all")

大功告成，这里还有一步很关键的，就是把WebConfig中的Debug设置改为false，然后<Ctrl>+<F5>看网站，非常棒，对吧……

也许你要说我有些地方其实不需要那么多的js或者css呢，它都帮我捆了起来岂不是会降低效率？——基本上不会，因为浏览器都有缓存的功能，除非你按F5刷新页面，（如果是苹果系统的话我记得是<Command>+<R>），浏览器才会尝试从服务器上重新下载js和css，就算重新下载，经过捆绑和压缩的js和css也没多大，效率还行的。如果你实在不想捆那么多js或者css的，那就把bundling设置得细一些，但这样的话就可能导致更多次的请求，从而效率有所下降，总之就是要自己好好权衡了。