MVC bundle的使用总结

在我们的项目里面充斥着很多静态文件，为了追求模块化、插件化很多静态文件都被设计成模块的方式或者被分解，在需要的时候在通过组合的方式在UI层上使用；这就带来一个问题，文件多了会影响浏览器加载页面的速度，而且由于浏览器的并发限制，对于并行的请求不是无限制的，所以捆绑静态文件的功能就产生。引自：.NET/ASP.NET 4.5 Bundle组件（捆绑、缩小静态文件）

ASP.NET组件System.Web.Optimization就实现了静态文件的捆绑。

同时，可以对捆绑的插件（css、js）（外部插件或自己写的插件）进行压缩。web发布之后，用户端看到的就是压缩之后的文件。如果网站的css或js有了更新，mvc会根据key值自动判别，并重新加载新key值。其他页面若用到该压缩文件，可以直接从内存中获得。

以下给出一个启用压缩之后的效果（圈起来的就是被整合压缩后的文件）：

---

如何设置对css和js文件的压缩呢？以下分步骤说明：

1、在web下  App_Start->BundleConfig ,打开类文件。给大家看下我项目中截图

2、在静态方法RegisterBundles下添加css和js的打包

css打包

            bundles.Add(
                new StyleBundle("~/Bundles/App/vendor/css")
                    .Include("~/Content/toastr.css", new CssRewriteUrlTransform())
                    .Include("~/Scripts/sweetalert/sweet-alert.css", new CssRewriteUrlTransform())
                    .Include("~/Content/flags/famfamfam-flags.css", new CssRewriteUrlTransform())
                    .Include("~/Scripts/components/icheck/flat/blue.css", new CssRewriteUrlTransform())
                    .Include("~/fonts/iconfont/iconfont.css", new CssRewriteUrlTransform())
                    .Include("~/Common/css/content.css", new CssRewriteUrlTransform())
                    .Include("~/Common/Scripts/customerScrollbar/jquery.mCustomScrollbar.css")
            );

js打包

            bundles.Add(
                new ScriptBundle("~/Bundles/App/vendor/js")
                    .Include(
                        "~/Scripts/jquery-2.2.4.js",
                        "~/Scripts/jquery-ui-1.11.4.js",
                        "~/Scripts/jquery.validate.js",
                        "~/Scripts/modernizr-2.8.3.js",
                        "~/Abp/ie10fix.js",
                        "~/Scripts/json2.js",
                        "~/Scripts/bootstrap.js",
                    )
                );

3、启用插件压缩（一句代码）

BundleTable.EnableOptimizations = true;

如果不启用压缩，则将值设为false。 默认（删除该行）是开启压缩的

4、上面第2项中，两个配置得到结果如下：

 css的压缩

 5、在页面上引入压缩文件

...
@Styles.Render("~/Bundles/App/vendor/css")
...
@Scripts.Render("~/Bundles/App/vendor/js")
...

以上就完成了插件压缩的配置工作了。下面将将我在项目中的使用心得给大家做个交流。

---

1）可以在RegisterBundles下添加多个StyleBundle和ScriptBundle对象。见图1

在我的项目中，我根据各个页面的需要使用的插件特性创建了多个bundle。比如：编辑页面、表格数据展示这两类页面用到的插件会有差异，我就分别为其创建bundle，各个页面按需引用。

2）如果引入的css文件中含有 url() 使用。比如引用图片情形时，将web发布在虚拟网站（子网站/应用程序）时，会丢失虚拟网站目录层级。

举例如下：

http://xx.xx.xx.xx:81/项目名/Bundles/App/vendor/js?v=N4uV_ZQcDQ2lz2kdjv0sX6ACsBkTG8E5Wvw6qVSY8lY1

以上“项目名”为虚拟层级，如果被压缩的css中有url(xx)时，最终显示图片的地址中是没有“项目名”这个层级的，将出现找不到图片错误

在我的项目中，有这样的使用 background-image: url("../Images/ztree/menu.png"); 始终无法出现虚拟目录层级。

网上有人说可以单独给这个css创建一个bundle ，然后在页面中单独引用。---可以解决一部分应用场景

最终为了办法是：单独建了个css文件，在里头重写了其他css中含有url(xx)引用，并且不把这个css放置到bundle中，而是在页面的bundle引用之后去直接引用。

具体操作请看下面：

...
@Styles.Render("~/Bundles/App/vendor/css")
...
<link href="~/Common/css/urlExtend.css" rel="stylesheet" />

1）以上 urlExtend.css 就是我重写的css，可以给大家看下里头的一些内容：

/**from content.css checkbox优化for URL */
input[type=checkbox]:checked::after{display:block;position:absolute;top:-4px;left:-4px;content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAtklEQVQ4y2P4//8/A7Ux1Q0cxoaCADIbCUgCMTvVXAoE5kA8CYidyXYpGrAH4iVAHIXiCwoMDQTimUBcBsRMlBrKCsTpUANzkC0j11BuIK6EGlgKsoAkQ4FgChD7AzELVI8YEDdDDawDYk6YQaQY6gg1oAqILYC4D8oHGcyLbBAphoJAKtQgGO4EYiHk2CLHUJAXm6AG9gCxNHoSIMdQEJCFGqiALaGSayjMxQwUGzq0S6nhZygA2ojsbh6J67kAAAAASUVORK5CYII=)}

/*from iconfont.css 阿里巴巴字体样式 for url*/
@font-face {font-family: "iconfont";
  src: url('../../fonts/iconfont/iconfont.eot?t=1494298093205'); /* IE9*/
  src: url('../../fonts/iconfont/iconfont.eot?t=1494298093205#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../../fonts/iconfont/iconfont.woff?t=1494298093205') format('woff'), /* chrome, firefox */
  url('../../fonts/iconfont/iconfont.ttf?t=1494298093205') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../../fonts/iconfont/iconfont.svg?t=1494298093205#iconfont') format('svg'); /* iOS 4.1- */
}

2）这里需要注意：重写的url()图片或其他路径引用应该以当前 urlExtend.css 所在的路径来定位。

3）如果web今后要放置在子网站中，切记不能在css中以~/开头来设置文件路径的引用。

如果所引用的文件在同一目录，直接填写引用的文件名，如：url(img.png)；

如果在子目录则 url(子目录名/img.png)；

如果在其他目录则通过../退格来引用，如：url("../Images/ztree/root.png");

文章最后分享另一个压缩插件：面向.Net程序员的前端优化（Combres）