In the next line, I am including all the script files under Client directory. In the first line, I am bundling angular framework related files. IncludeDirectory ( "~/Client", "*.js" )) Add ( new ScriptBundle ( "~/scripts/client" ). Include ( "~/scripts/angular.js", "~/scripts/angular-route.js" )) BundleTable. Add ( new ScriptBundle ( "~/scripts/angular" ). Here is the minimal bundling information, which bundles the Angular Framework and client scripts. This is important because identifying and troubleshooting script errors with bundling and minification enabled app is hard. You can specify the script directory or files based on your convenience. ASP.NET MVC comes with ASP.NET Web Optimization Framework which helps to combine and minify CSS and JS files. This post is about the challenges and solutions while enabling bundling and minification in your aspnet mvc application. The results speak for themselves: from 27 requests to 5 on initial load, and only 3 requests for less than 2K after that.Bundling and Minifying an AngularJS Application with ASP.NET MVCĪngularJS Optimization Minification Bundling DI ASP.NET MVCīundling and minifying an application scripts and CSS reduces page load time and asset size. That could change if I start using LESS or CoffeeScript. For development, I continue to run the app from my "app" folder, so I don't currently have a need for watching and processing assets on-the-fly.
I tried to use grunt-ngmin with uglify and had no luck.Īfter making these changes, I'm able to run "grunt" and get an optimized version of my app in the "dist" folder of my project. The comments are the important part, your files will likely be different.Ī couple of things to note: 1) the copy task copies the "shims" directory from Webshims lib because it loads files dynamically and 2) setting "mangle: false" on the uglify task is necessary for Angular's dependency injection to work.
Add comments to app/index.html so usemin knows what files to process.'copy', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'rev', 'usemin' Tell Grunt what to do when we type "grunt" into the terminal Grunt.loadNpmTasks('grunt-contrib-uglify') Grunt.loadNpmTasks('grunt-contrib-cssmin')
Grunt.loadNpmTasks('grunt-contrib-concat') Grunt.loadNpmTasks('grunt-contrib-copy') Grunt.loadNpmTasks('grunt-contrib-clean') Create a Gruntfile.js that runs all the plugins.Add Grunt plugins in package.json to do concat/minify/asset versioning:.Edit package.json to include a version number (e.g.
#ANGULARJS MINIFY INSTALL#
Install Grunt's command line interface with "sudo npm install -g grunt-cli".Based on my findings, I submitted a pull request to add Grunt to angular-seed.īelow are the steps I used to add Grunt to my Angular project.
#ANGULARJS MINIFY HOW TO#
I found it to be quite simple, once I figured out how to make it work with Angular. Therefore, I turned to Grunt to do the optimization this time. The Angular project I'm working on now will be published on a web server, as well as bundled in an iOS native app. On the other, it was part of a Grails application, so I used the resources and yui-minify-resources plugins. On one project, it was Ant and its concat task. To concat and minify their stylesheets and scripts, I used mechanisms that already existed in the projects. I developed a couple AngularJS apps last year.
As part of my Devoxx 2013 presentation, I showed how to do page speed optimization in a Java webapp. Since then, I've optimized this blog, made it even faster with a new design, doubled the speed of several apps for clients and showed how to make AppFuse faster. My original inspiration was Steve Souders and his Even Faster Web Sites talk at OSCON 2008. I'm passionate about front end optimization and have been for years.
0 kommentar(er)
