AngularJS
Préparez-vous à la production - Grunt

Afficher le préchargement

Lorsque la première vue temporelle est demandée, Angular effectue XHR requête XHR pour obtenir cette vue. Pour les projets de taille moyenne, le nombre de vues peut être important et ralentir la réactivité des applications.

La bonne pratique consiste à pré-charger toutes les vues en même temps pour les projets de petite et moyenne taille. Pour les projets plus importants, il est également bon de les regrouper dans des volumes importants, mais d’autres méthodes peuvent être utiles pour diviser la charge. Pour automatiser cette tâche, il est utile d'utiliser les tâches Grunt ou Gulp.

Pour pré-charger les vues, nous pouvons utiliser l'objet $templateCache . C'est un objet, où angulaire stocke chaque vue reçue du serveur.

Il est possible d'utiliser le module html2js , qui convertira toutes nos vues en un seul fichier module-js. Ensuite, nous devrons injecter ce module dans notre application et c'est tout.

Pour créer un fichier concaténé de toutes les vues, nous pouvons utiliser cette tâche

module.exports = function (grunt) {
 //set up the location of your views here
 var viewLocation = ['app/views/**.html'];
 
 grunt.initConfig({
        pkg: require('./package.json'),
            //section that sets up the settings for concatenation of the html files into one file
            html2js: {
                        options: {
                            base: '',
                            module: 'app.templates', //new module name
                            singleModule: true,
                            useStrict: true,
                            htmlmin: {
                                collapseBooleanAttributes: true,
                                collapseWhitespace: true
                            }
                        },
                        main: {
                            src: viewLocation,
                            dest: 'build/app.templates.js'
                        }
                    },
            //this section is watching for changes in view files, and if there was a change, it will regenerate the production file. This task can be handy during development.
            watch: {
                views:{
                    files: viewLocation,
                    tasks: ['buildHTML']
                },
            }
        });
        
        //to automatically generate one view file
        grunt.loadNpmTasks('grunt-html2js');
        
        //to watch for changes and if the file has been changed, regenerate the file
        grunt.loadNpmTasks('grunt-contrib-watch');
        
        //just a task with friendly name to reference in watch
        grunt.registerTask('buildHTML', ['html2js']);
};

Pour utiliser cette méthode de concaténation, vous devez apporter 2 modifications: Dans votre fichier index.html , vous devez référencer le fichier de vue concaténé.

<script src="build/app.templates.js"></script>

Dans le fichier où vous déclarez votre application, vous devez injecter la dépendance

angular.module('app', ['app.templates'])

Si vous utilisez des routeurs populaires comme ui-router , il n'y a aucun changement dans la façon dont vous référencez les modèles

    .state('home', {
        url: '/home',
        views: {
            "@": {
                controller: 'homeController',
                //this will be picked up from $templateCache
                templateUrl: 'app/views/home.html'
            },
        }

    })

Optimisation de script

Il est recommandé de regrouper les fichiers JS et de les réduire. Pour les projets plus importants, il pourrait y avoir des centaines de fichiers JS et une latence inutile pour charger chaque fichier séparément du serveur.

Pour une minification angulaire, il est nécessaire de faire annoter toutes les fonctions. Cela nécessaire pour l'injection angulaire de dépendance propre minificaiton. (Pendant la minification, les noms de fonctions et les variables seront renommés et cela interrompra l'injection de dépendances si aucune action supplémentaire ne sera effectuée.)

Au cours de minificaiton $scope et myService variables seront remplacées par d'autres valeurs. L'injection de dépendance angulaire fonctionne en fonction du nom, par conséquent, ces noms ne doivent pas changer

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

Angular comprendra la notation du tableau, car la minification ne remplacera pas les littéraux de chaîne.

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

• Nous allons tout d'abord concilier tous les fichiers.
• Deuxièmement, nous utiliserons le module ng-annotate , qui préparera le code pour la minification
• Enfin, nous appliquerons le module uglify .

module.exports = function (grunt) {// configure l'emplacement de vos scripts ici pour le réutiliser dans le 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']);
};