Summary of Web Development Framework experience based on MVC4 + EasyUI (11) -- use Bundles to simplify Page code and mvc4bundles

Summary of Web Development Framework experience based on MVC4 + EasyUI (11) -- use Bundles to simplify Page code and mvc4bundles

During Web development, we often need to reference many CSS and JS files. With more plug-ins or independent style files, our Web interface code may become increasingly bloated, it also seems cumbersome. In MVC, a Bundle object is provided, which is very convenient to simplify the Page code. This article mainly introduces it in my MVC framework, how to Use bundles to simplify Page code.

1. Regular Page code

As we know, with more effects, we may introduce some new JS and CSS files to achieve better Web interface performance. In this case, the number of lines of file code is gradually increased, resulting in a relatively bloated scenario. The following is my normal Web interface, and many JS and CSS files need to be introduced in the header.

@ * Add a Jquery EasyUI style * @ <link href = "~ /Content/JqueryEasyUI/themes/default/easyui.css "rel =" stylesheet "type =" text/css "/> <link href = "~ /Content/JqueryEasyUI/themes/icon.css "rel =" stylesheet "type =" text/css "/> <link href = "~ /Content/themes/Default/style.css "rel =" stylesheet "type =" text/css "/> <link href = "~ /Content/themes/Default/default.css "rel =" stylesheet "type =" text/css "/> @ * Add Jquery, JS file for EasyUI and easyUI language packs * @ <script type = "text/javascript" src = "~ /Content/JqueryEasyUI/jquery. min. js "> </script> <script type =" text/javascript "src = "~ /Content/JqueryEasyUI/jquery. easyui. min. js "> </script> <script type =" text/javascript "src = "~ /Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js "> </script> @ * Date Format reference * @ <script src = "~ /Content/datapattern. js "> </script> <! -- Reference EasyUI extension --> <link href = "~ /Content/JQueryTools/jQuery. easyui-extend/themes/easyui.extend.css "rel =" stylesheet "/> <link href = "~ /Content/JQueryTools/jQuery. easyui-extend/themes/icon.css "rel =" stylesheet "/> <script src = "~ /Content/JQueryTools/jQuery. easyui-extend/jquery. easyui. extend. min. js "> </script> @ * Reference prompt control * @ <link rel =" stylesheet "type =" text/css "href = "~ /Content/JQueryTools/jNotify/jquery/jNotify.jquery.css "media =" screen "/> <script type =" text/javascript "src = "~ /Content/JQueryTools/jNotify/jquery/jNotify. jquery. js "> </script> @ * Common Component Business script functions * @ <script type =" text/javascript "src = "~ /Scripts/ComponentUtil. js "> </script>

Then such files are constantly being copied, which is very unsightly and inconvenient to maintain.

In ASP. net mvc introduced a Bundle, which is used to Bundle js and css files into a block for output, greatly simplifying the interface code, by default, the content is compressed to improve efficiency.

The simplified interface code is as follows.

    @using System.Web.Optimization;    @Scripts.Render("~/bundles/jquery")    @Styles.Render("~/Content/css")    @Scripts.Render("~/bundles/jquerytools")    @Styles.Render("~/Content/jquerytools")

 

2. Use bundles-optimized interface operations

To achieve the above results, we need to perform several operations.

Add several lines of processing code to BundleConfig in App_Start, as shown below.

Public class BundleConfig {// For more information about bunddling, visit http://go.microsoft.com/fwlink/?LinkId=254725 Public static void RegisterBundles (BundleCollection bundles) {// to reduce the number of Bundles names, the CSS Bundle defined is :"~ /Content/css ","~ /Content/jquerytools "// The Bundles of the defined Script is :"~ /Bundles/jquery ","~ /Bundles/jquerytools "// StyleBundle and ScriptBundle StyleBundle css = new StyleBundle ("~ /Content/css "); ScriptBundle jquery = new ScriptBundle ("~ /Bundles/jquery "); // Add the css. Include ("~ /Content/JqueryEasyUI/themes/default/easyui.css ","~ /Content/JqueryEasyUI/themes/icon.css ","~ /Content/themes/Default/style.css ","~ /Content/themes/Default/default.css "); // Add the JS file of the Jquery, EasyUI, and easyUI language packs, and reference jquery. Include ("~ /Content/JqueryEasyUI/jquery. min. js ","~ /Content/JqueryEasyUI/jquery. easyui. min. js ","~ /Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js ","~ /Content/datapattern. js "); // some common component business script functions (recommended to the end) jquery. Include ("~ /Scripts/ComponentUtil. js "); // extended StyleBundle and ScriptBundle StyleBundle cssExtend = new StyleBundle ("~ /Content/jquerytools "); ScriptBundle jqueryExtend = new ScriptBundle ("~ /Bundles/jquerytools "); // reference EasyUI extension cssExtend. Include ("~ /Content/JQueryTools/jQuery. easyui-extend/themes/easyui.extend.css ","~ /Content/JQueryTools/jQuery. easyui-extend/themes/icon.css "); jqueryExtend. Include ("~ /Content/JQueryTools/jQuery. easyui-extend/jquery. easyui. extend. min. js "); // reference the message prompt control cssExtend. Include ("~ /Content/JQueryTools/jNotify/jquery/jNotify.jquery.css "); jqueryExtend. Include ("~ /Content/JQueryTools/jNotify/jquery/jNotify. jquery. js "); // other auxiliary scripts and styles // Add all to the set to bundles. add (css); bundles. add (jquery); bundles. add (cssExtend); bundles. add (jqueryExtend );}}

The above Code adds some necessary Jquery and some scripts and styles extended to the JqueryTool to facilitate unified management.

By default, Bundle is sorted alphabetically. If you want to sort the Bundle in the ascending order, you need to write a custom sorting rule for processing, as shown below:

/// <Summary> /// custom Bundles sorting /// </summary> internal class AsIsBundleOrderer: IBundleOrderer {public virtual IEnumerable <BundleFile> OrderFiles (BundleContext context, IEnumerable <BundleFile> files) {return files ;}}

Then, you can modify the object sorting rules during the call.

            ScriptBundle jqueryExtend = new ScriptBundle("~/bundles/jquerytools");            jqueryExtend.Orderer = new AsIsBundleOrderer();

 

Add the Bundle registration in Global. asa. cs, as shown below.

        protected void Application_Start()        {            AreaRegistration.RegisterAllAreas();            BundleConfig.RegisterBundles(BundleTable.Bundles);            WebApiConfig.Register(GlobalConfiguration.Configuration);            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);            RouteConfig.RegisterRoutes(RouteTable.Routes);        }

Finally, in the MVC view, you can use Bundle to simplify the interface code. The simplified interface code is as follows.

<! DOCTYPE html> 
 
Running interface, although the simplified version code is used, it still runs normally
 
The page code output is still consistent with that not optimized previously.
<! DOCTYPE html> 
 

Which team is the strongest in Live 8?