asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )

Bundling and Minification两个单词对今天的内容有个比较好的总结。

问题所在

一、 在asp.net包括mvc项目中,引入js和css也许有人认为是个很容易和很简单操作的事情,vs自带的拖动功能可以很简单的实现引入工作,甚至不需要编写任何代码,但是这样会导致路径问题,母版页和用户控件的问题尤为严重。

二、由于现在web项目的庞大,页面往往需要加载很多未压缩的js和css导致页面加载速度很慢。当然也可以在发布时进行js和css的压缩和合并工作,这样无疑给程序员带来了更多的麻烦。

以上问题就是今天要解决的问题,当然微软已经为我们做了很多工作,我们要做的就是运用他。

Bundling

配置

在新建mvc4的项目中我们会发现比mvc以前项目多个App_Start文件夹,会有BundleConfig.cs文件。在Global.asax中的Application_Start方法中会调用BundleConfig.cs的方法,我们需要做的就是了解BundleConfig.cs的内容。

 1 public class BundleConfig
 2     {
 3         // 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
 4         public static void RegisterBundles(BundleCollection bundles)
 5         {
 6             bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 7                         "~/Scripts/jquery-{version}.js"));
 8 
 9             bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
10                         "~/Scripts/jquery-ui-{version}.js"));
11 
12             bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
13                         "~/Scripts/jquery.unobtrusive*",
14                         "~/Scripts/jquery.validate*"));
15 
16             // 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好
17             // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
18             bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
19                         "~/Scripts/modernizr-*"));
20 
21             bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
22 
23             bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
24                         "~/Content/themes/base/jquery.ui.core.css",
25                         "~/Content/themes/base/jquery.ui.resizable.css",
26                         "~/Content/themes/base/jquery.ui.selectable.css",
27                         "~/Content/themes/base/jquery.ui.accordion.css",
28                         "~/Content/themes/base/jquery.ui.autocomplete.css",
29                         "~/Content/themes/base/jquery.ui.button.css",
30                         "~/Content/themes/base/jquery.ui.dialog.css",
31                         "~/Content/themes/base/jquery.ui.slider.css",
32                         "~/Content/themes/base/jquery.ui.tabs.css",
33                         "~/Content/themes/base/jquery.ui.datepicker.css",
34                         "~/Content/themes/base/jquery.ui.progressbar.css",
35                         "~/Content/themes/base/jquery.ui.theme.css"));
36         }
37     }

我们会发现代码中有很多绑定了js和css,因为路径用到了绝对路径,所有我们不用考虑路径带来的问题。

我们要在这里配置我们需要的js和css,在这里我们也可以对js和css进行分类命名,比如bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));因为在进行验证时需要jquery.validate.js和jquery.validate.unobtrusive.js两个js的引用。 关于jquery validate unobtrusive 验证

前台引入

Razor试图

 @Styles.Render("~/Content/css")

 @Scripts.Render("~/bundles/jquery")

webform视图

<%=@Styles.Render("~/Content/css")%>

<%=@Scripts.Render("~/bundles/jquery")%>

以上代码就可以简单的实现对css和js的引入

我们也可以

<script src='@Scripts.Url("~/bundles/jquery")'></script>引入

Styles.Render和Scripts.Render支持多个参数的传入,如果需要引入多个js,只需要一行代码就可以搞定。Scripts.Render("~/bundles/jquery","~/bundles/jqueryval")

 

我们页面的源码中就可以看到

<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.7.1.js"></script> 

在BundleConfig.cs代码中我们看到有许多的*和{version},*是通配符{version}代表引入js和css的版本,用{version}的优点在于我们更新js和css时不用更改配置。

只要两步我们就轻松实现js和css的引入,完全不用考虑路径和需要引入哪些js和css(我们可以在配置中配置哪些功能需要哪些js和css,然后进行命名)的问题。

 

Minification

压缩合成js和css也许我们在项目运行中没有发现压缩和合成的代码,那是因为如果在发布前压缩和合成了我们就没办法调试js和css了

我们要做的就是把web.config的debug为false即可<compilation debug="false" targetFramework="4.0" />,其实这一项再发布网站时是必做的。所以我们不需要再为js和css的Minification做任何事情。

当然我们也可以在debug为true时看到MInification的代码,设置BundleTable.EnableOptimizations为true即可。

1 public static void RegisterBundles(BundleCollection bundles)
2 {
3     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
4                  "~/Scripts/jquery-{version}.js"));
5 
6     // Code removed for clarity.
7     BundleTable.EnableOptimizations = true;
8 }

 

再次运行网站我们会发现页面的源码有所改变

<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>
<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>

机制会把我们分类的js和css合并压缩成一个js和css,这正是我们需要的。

mvc4的Bundling and Minification可以很简单的实现我们需要的工作。

 

 

 

posted @ 2013-08-12 14:15  Emrys5  阅读(3396)  评论(12编辑  收藏