MVC 4 bundles and minifies scripts and style sheets for best performance. This clean framework has some great selling points:
- Automatically uses minified versions when you're running in production but leaves everything uncompressed and easily readable when you're debugging.
- Reduces the markup needed to declare JavaScript and style files. Yet you can still control the order that files load in.
- Allows bundling by using wild cards and variables. This allows you to load all the "Kendo" JavaScript files, for example.
A new MVC 4 app will bundle scripts and styles for jQuery, Knockout and Modernizr automatically, but you can create your own bundles of scripts and stylesheets.
Here's an example walkthrough for bundling Kendo UI JavaScript and style sheets into your project. You can download a 30 day trial version of kendo ui from here.
- Add kendo.web.js and kendo.web.min.js to the \Scripts directory of your project. These scripts are located in the Kendo installation folders in the \source\js and \js folders respectively.
- Add kendo.common.css and kendo.default.css to the \Content\Themes\Base folder. Put the minified versions into the \minified folder, one directory down. These files are located in the Kendo installation folder under \styles and \source\styles folders.
- Open BundleConfig.cs in the \App_Start directory of the application. Inside the RegsterBundles() method, add the code below. This example adds to the end of the method, but it doesn't affect the order that the scripts load – load order is determined later.
1: bundles.Add(new ScriptBundle("~/bundles/kendo").Include( 2: "~/Scripts/kendo.web.js"));
3:
4: bundles.Add(new StyleBundle("~/Content/kendo").Include( 5: "~/Content/themes/base/kendo.common.css",
6: "~/Content/themes/base/kendo.default.css"
7: ));
The
ScriptBundle() and
StyleBundle() constructors take the virtual path used to register the bundle on a page. The array of paths fed to the
Include() method are the paths to each script or style sheet in the bundle.
- Open _Layout.cshtml. This file is located in the \Views\Shared folder and acts as a "master" file for an MVC application. By default, this cshtml is output for every page, and where the actual view, such as "index.cshtml" is output from the call @RenderBody(). The _Layout.cshtml file looks like the example below:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <meta name="viewport" content="width=device-width" />
6: <title>@ViewBag.Title</title>
7: @Styles.Render("~/Content/css") 8: @Scripts.Render("~/bundles/modernizr") 9: </head>
10: <body>
11: @RenderBody()
12:
13: @Scripts.Render("~/bundles/jquery") 14: @RenderSection("scripts", required: false) 15: </body>
16: </html>
Notice the methods
@Styles.Render() and
@Scripts.Render() output bundle references to the page. All your scripts and styles in bundles can now be referenced from any page.
- Change _Layout.cshtml to include the kendo bundles. You'll need to move the jquery bundle above the kendo bundle.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <meta name="viewport" content="width=device-width" />
6: <title>@ViewBag.Title</title>
7: @Styles.Render("~/Content/css") 8: @Styles.Render("~/Content/kendo") 9: @Scripts.Render("~/bundles/modernizr") 10: @Scripts.Render("~/bundles/jquery") 11: @Scripts.Render("~/bundles/kendo") 12: </head>
13: <body>
14: @RenderBody()
15: @RenderSection("scripts", required: false) 16: </body>
17: </html>
- Run the application and view any page. <link> and <script> tags are added to the page. If you are running in debugging mode, the styles and scripts will not be combined or compressed. Notice that the two kendo css files "common" and "default" are both listed individually and not combined.
- Now try changing the compilation debug flag in web.config to false:
1: <configuration>
2: <system.web>
3: <compilation debug="false" />
4: . . .
- Run the project again and the output changes automatically. Notice that kendo style sheets bundle is on a single line. Follow the link to the kendo stylesheet to show the combined, minified version.
In this mode, your scripts and style sheets will load quickly from every page in your MVC site.