You can also implement bundling and minification techniques with in Asp.net MVC3 and Asp.net 4.0. In previous article Asp.net MVC 4 performance optimization with bundling and minification,
I have explained both the techniques, Now I would like to share you
could you achieve this functionality with .Net Framework 4.0.
How to do it in MVC3 and Asp.Net 4.0
Adding Refrences
First of all add the references of System.Web.Optimization.dll and WebGrease.dll to your MVC3 and Asp.Net 4.0 projects as shown below. You can download the dll by using download link.Creating Bundle
Now create the bundle for your css and js files with in the Global.asax file as shown below.Here, I have created the bundle of all required css and js files. You can also add your own css and js files with complete path using Include method.
- public static void RegisterBundles(BundleCollection bundles)
- {
- //Creating bundle for your css files
- bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/mystyle.min.css",
- "~/Content/site.min.css"));
- //Creating bundle for your js files
- bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
- "~/Scripts/jquery-1.5.1.min.js",
- "~/Scripts/jquery.validate.min.js",
- "~/Scripts/jquery.validate.unobtrusive.min.js"));
- }
Registering Bundle
You need to register above created bundles with in Application_Start event of Global.asax like as
- protected void Application_Start()
- {
- RegisterBundles(BundleTable.Bundles);
- // Other Code is removed for clarity
- }
Adding Bundles to Layout Page in MVC3
Now you can add the above created style and script bundles to the Layout page or where you want to use as shown below:
- @System.Web.Optimization.Styles.Render("~/Content/css")
- @System.Web.Optimization.Scripts.Render("~/bundles/jquery")
Adding Bundles to Master Page in Asp.Net 4.0
Now you can add the above created style and script bundles to the Master page or where you want to use as shown below:In Asp.Net 4.0 you also required to add System.Web.Optimization namespace and assembly Microsoft.AspNet.Web.Optimization.WebForms reference to the web.config file of your Asp.Net 4.0 project as shown below:
- <%: Styles.Render("~/Content/css") %>
- <%: Scripts.Render("~/bundles/jquery")%>
You need not to do any changes in web.config file of your MVC3 project.
- <system.web>
- <compilation debug="true" targetFramework="4.0" />
- <pages>
- <namespaces>
- <add namespace="System.Web.Optimization" />
- </namespaces>
- <controls>
- <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
- </controls>
- </pages>
- <!-- Other Code is removed for clarity -->
- </sytem.web >
Enabling Bundling and Minification in debug mode
Bundling and minification doesn't work in debug mode. So to enable this features you need to add below line of code with in Application_Start event of Global.asax.
- protected void Application_Start()
- {
- BundleConfig.RegisterBundles(BundleTable.Bundles);
- //Enabling Bundling and Minification
- BundleTable.EnableOptimizations = true;
- // Other Code is removed for clarity
- }