Posted by Anuraj on Tuesday, March 22, 2016
Bundling and minifying an application scripts and CSS reduces page load time and asset size. This post is about the challenges and solutions while enabling bundling and minification in your aspnet mvc application. ASP.NET MVC comes with ASP.NET Web Optimization Framework which helps to combine and minify CSS and JS files. You can specify the script directory or files based on your convenience. This is important because identifying and troubleshooting script errors with bundling and minification enabled app is hard.
Here is the minimal bundling information, which bundles the Angular Framework and client scripts.
In the first line, I am bundling angular framework related files. In the next line, I am including all the script files under Client directory.
You can use the bundles in the _Layout.cshtml page using Scripts.Render method.
And here is my minimal Angular app and controller. As I am developing an Enterprise application, I am seperating the app and controller in two different files. Here is the app
And here is the controller code.
Here is the HTML which will use the app and controller.
If you look at the HTML source, you will find something like this.
This will resolve the script order problem. Here is the HTML source generated.
Once you do this and run the application again you will find some other like this.
It because the ASP.NET Web Optimization Framework renamed the ‘$scope’ variable to ‘n’. You can fix this issue using different DI syntax.
Using Inline Array Annotation
Or using $inject Property Annotation.
The above methods will help you to minify your code without breaking the application behavior.
Happy Programming :)