MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Script optimisation


It is good practice to combine JS files together and minify them. For larger project there could be hundreds of JS files and it adds unnecessary latency to load each file separately from the server.

For angular minification it is required to to have all functions annotated. That in necessary for Angular dependency injection proper minificaiton. (During minification, function names and variables will be renamed and it will break dependency injection if no extra actions will be taken.)

During minificaiton $scope and myService variables will be replaced by some other values. Angular dependency injection works based on the name, as a result, these names shouldn't change

.controller('myController', function($scope, myService){
})

Angular will understand the array notation, because minification won't replace string literals.

.controller('myController', ['$scope','myService', function($scope, myService){
}])

.Firstly we will concatinate all files end to end.
.Secondly we will use ng-annotate module, that will prepare code for minification
.Finally we will apply uglify module.

module.exports = function (grunt) { //set up the location of your scripts here for reusing it in code var scriptLocation = ['app/scripts/*.js'];

grunt.initConfig({
 pkg: require('./package.json'),
 //add necessary annotations for safe minification
 ngAnnotate: {
 angular: {
 src: ['staging/concatenated.js'],
 dest: 'staging/anotated.js'
 }
 },
 //combines all the files into one file
 concat: {
 js: {
 src: scriptLocation,
 dest: 'staging/concatenated.js'
 }
 },
 //final uglifying
 uglify: {
 options: {
 report: 'min',
 mangle: false,
 sourceMap:true
 },
 my_target: {
 files: {
 'build/app.min.js': ['staging/anotated.js']
 }
 }
 },
 
 //this section is watching for changes in JS files, and if there was a change, it will
regenerate the production file. You can choose not to do it, but I like to keep concatenated version
up to date
 watch: {
 scripts: {
 files: scriptLocation,
 tasks: ['buildJS']
 }
 }
 
});
 //module to make files less readable
 grunt.loadNpmTasks('grunt-contrib-uglify');
 
 //mdule to concatenate files together
 grunt.loadNpmTasks('grunt-contrib-concat');
 
 //module to make angularJS files ready for minification
 grunt.loadNpmTasks('grunt-ng-annotate');
 
 //to watch for changes and if the file has been changed, regenerate the file
 grunt.loadNpmTasks('grunt-contrib-watch');
 
 //task that sequentially executes all steps to prepare JS file for production
 //concatinate all JS files
 //annotate JS file (prepare for minification
 //uglify file
 grunt.registerTask('buildJS', ['concat:js', 'ngAnnotate', 'uglify']);
};


Conclusion

In this page (written and validated by ) you learned about AngularJS Script optimisation . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Lazy loading.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.