asp.net mvc4 use System.Web.Optimization javascript and style forthe introduction of code merging and compression optimization(ScriptBundle, StyleBundle, Bundling and Minification)

 

Bundling and Minification two words for today's content has a relatively good summary.

 

problem

 

one in asp.net mvc project, including the introduction of js and css Some may think that is a very easy and very simple operation thing, vs built drag feature can be very simple to achieve the introduction of work, or even write any code, but this path will lead to problems, master pages and user controls a particularly serious problem.

 

two, because now the huge web projects, often need to load a lot of pages uncompressed js and css cause pages to load slowly. Of course, can also be released when js and css compression and consolidation work, so no doubt to the programmer to bring more trouble.

 

above problem is to solve the problem today, of course, Microsoft has done a lot of work for us, we have to do is to use him.

 

Bundling

 

Configuration

 

in New mvc4 project we will find more than previous projects mvc App_Start folder, there will be BundleConfig.cs file. The Application_Start method in the Global.asax will call BundleConfig.cs approach, we need to do is to understand BundleConfig.cs content.

 

  

 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     }

 

 

we will find a lot of code to bind the js and css, because the path to use the absolute path, the path of all we do not consider the problems posed.

 

we here we need to configure the js and css, where we can also classify named js and css, such bundles.Add ( new ScriptBundle ( " ~ / bundles / jqueryval " ). Include ( " ~ / Scripts / jquery.unobtrusive * " , " ~ / Scripts / jquery.validate * " )); as required during authentication jquery.validate.js and jquery.validate . unobtrusive.js two js references. About jquery validate unobtrusive verification

 

reception introduction

 

Razor attempt

 

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

 

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

 

webform view

 

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

 

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

 

above code can simply realize the css and js introduction

 

we can

 

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

 

Styles.Render and Scripts.Render support multiple parameter passing, if you need to introduce multiple js, only one line of code can handle that. Scripts.Render ("~ / bundles / jquery", " ~ / bundles / jqueryval ")

 

 

page source code we can see

 

<link href="/Content/site.css" rel="stylesheet"/>

 

<script src="/Scripts/jquery-1.7.1.js"></script> 

 

in BundleConfig.cs code we see that there are many * and {version} , * is a wildcard {version} represents the version introduced js and css with {version} has the advantage when we update the js and css without changing the configuration.

 

as long as we can easily implement a two-step js and css introduction path and no need to consider what needs to introduce js and css (we can configure which features require configuration which js and css, then named) of problem.

 

 

Minification

 

compression synthesis js and css maybe we did not find in the project operation code compression and synthesis, it is because if the pre-release compression and synthesis we have no way to debug the js and css

 

we have to do is put the web.config debug to false to , in fact, this is a re-publish the site will do. So we do not need the Minification of js and css to do anything.

 

course, we can also see in the debug is true MInification code can be set to true BundleTable.EnableOptimizations.

 

  

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 }

 

 

 

again running the site we will find a change in the source of the page

 

<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>

 

<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>

 

mechanisms will we classify the js and css combined and compressed into a js css, which is what we need.

 

mvc4 the Bundling and Minification can be very simple We need to work to achieve.