[Asp.net MVC]Bundle合并,压缩js、css文件
摘要
在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数。asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法。
一个例子
新建asp.net mvc项目,在App_Start文件夹中你可以看到一个叫做BundleConfig.cs的类,
该类内容如下:
public class BundleConfig { // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 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*")); // 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-*")); 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")); } }
如上代码所示,压缩和合并分两种对象ScriptBundle和StyleBundle。
namespace System.Web.Optimization { // // Summary: // Represents a bundle that does Js Minification. public class ScriptBundle : Bundle { // // Summary: // Initializes a new instance of the System.Web.Optimization.ScriptBundle class // that takes a virtual path for the bundle. // // Parameters: // virtualPath: // The virtual path for the bundle. public ScriptBundle(string virtualPath); // // Summary: // Initializes a new instance of the System.Web.Optimization.ScriptBundle class // that takes virtual path and cdnPath for the bundle. // // Parameters: // virtualPath: // The virtual path for the bundle. // // cdnPath: // The path of a Content Delivery Network (CDN). public ScriptBundle(string virtualPath, string cdnPath); } }
ScriptBundle有两个构造函数,virtualPath:js文件的虚拟路径,cdnPath:js的网络cdn路径。StyleBundle的构造函数的参数与ScriptBundle相同。
在上面的代码片段中你可以看到
jquery-{version}.js:其中version是jquery的版本号,version是一个版本号的占位符。
jquery.validate*:*通配符,匹配所有。
上面的代码完成后,需要在Global.asax的Application_start事件中对其注册。
如何使用?
在视图中,通过下面的代码实现对静态文件的引用。
浏览
怎么没起作用呢?Bundle默认在调试的情况下,是没有开启打包压缩的,可以通过下面的2中方式进行开启。
再浏览下
你会发现Jquery-1.10.2.js该文件在请求中已经不存在了,它已经被打包压缩在jquery?v=版本号,这个文件里面了。
另外一种打开打包压缩的方式,在web.config文件中中:
总结
上面就是对Bundle的用法介绍,对静态文件打包压缩可以减少请求次数,资源加载的速度。
-
博客地址:http://www.cnblogs.com/wolf-sun/
博客版权:如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。