Asp.net MVC中如何使用Bundle合并、压缩js与css文

发布时间:2021-08-03 10:32:37 作者:小新
来源:亿速云 阅读:141

这篇文章主要介绍Asp.net MVC中如何使用Bundle合并、压缩js与css文,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一个例子

新建asp.net mvc项目,在App_Start文件夹中你可以看到一个叫做BundleConfig.cs的类,

Asp.net MVC中如何使用Bundle合并、压缩js与css文

该类内容如下:

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相同。

在上面的代码片段中你可以看到

上面的代码完成后,需要在Global.asax的Application_start事件中对其注册。

Asp.net MVC中如何使用Bundle合并、压缩js与css文

如何使用?

在视图中,通过下面的代码实现对静态文件的引用。

Asp.net MVC中如何使用Bundle合并、压缩js与css文

浏览

Asp.net MVC中如何使用Bundle合并、压缩js与css文

怎么没起作用呢?Bundle默认在调试的情况下,是没有开启打包压缩的,可以通过下面的2中方式进行开启。

Asp.net MVC中如何使用Bundle合并、压缩js与css文

再浏览下

Asp.net MVC中如何使用Bundle合并、压缩js与css文

你会发现Jquery-1.10.2.js该文件在请求中已经不存在了,它已经被打包压缩在jquery?v=版本号,这个文件里面了。

另外一种打开打包压缩的方式,在web.config文件中中:

Asp.net MVC中如何使用Bundle合并、压缩js与css文

以上是“Asp.net MVC中如何使用Bundle合并、压缩js与css文”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. ASP.NET MVC Bundling and RequireJS
  2. jNs 在 ASP.NET MVC 项目中的应用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

asp.net mvc bundle

上一篇:CSS3选择器:nth-child和:nth-of-type之间有什么区别

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》