什么是Bundle?
Bundle是MVC 4 提供的一个新特性,一个在 View 和 Layout 中用于组织优化浏览器请求的 CSS 和 JavaScript 文件的技术。讲直观一点,就是Bundle是用来压缩js和css的。
怎么配置Bundle?
1、App_Start下新建BundleConfig.cs类
大致内容,如下图所示
我也精简了部分代码,代码如下public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
//jquery v1.11.3
bundles.Add(new ScriptBundle("~/js/jquery")
.Include("~/static/admin/plugins/jquery/jquery.min.js"));
//bootstrap 3.3.6
bundles.Add(new ScriptBundle("~/js/bootstrap")
.Include("~/static/admin/plugins/bootstrap/js/bootstrap.min.js"));
bundles.Add(new StyleBundle("~/css/bootstrap")
.Include("~/static/admin/plugins/bootstrap/css/bootstrap.css"));
}
}
2、配置Global.asax
在Global.asax文件中新加如下代码BundleConfig.RegisterBundles(BundleTable.Bundles);
怎么使用Bundle?
在需要使用的页面,类似下面这样调用代码即可@Scripts.Render("~/js/jquery")
@Scripts.Render("~/js/easyui")
@Styles.Render("~/css/easyui")
下面是,使用截图
在使用的过程中,直接@Scripts和@Styles的形式,可能会报错:当前上下文中不存在名称“Scripts”,解决方法,请看这篇文章:当前上下文中不存在名称“Scripts”
最后,默认情况下Bundle是不会对js和css压缩打包的,需要你手动开启,开启方式是配置web.confg文件
compilation中的debug设置为true,Bundle不会压缩js和css
compilation中的debug设置为false,Bundle会压缩js和css
使用效果,看以下截图
未开启压缩前,源代码如下图所示
开启压缩后,源代码如下图所示
此时,你可以看下script和link的内容,也是被压缩了的。