AngularJS
Preparati per la produzione - Grunt

Visualizza il preloading

Quando viene richiesta la prima visualizzazione temporale, normalmente Angular richiede XHR per ottenere quella vista. Per i progetti di medie dimensioni, il numero di visualizzazioni può essere significativo e può rallentare la reattività dell'applicazione.

È buona norma precaricare tutte le viste contemporaneamente per progetti di piccole e medie dimensioni. Per i progetti più grandi è buona norma aggregarli anche in alcuni blocchi significativi, ma alcuni altri metodi possono essere utili per suddividere il carico. Per automatizzare questa attività è utile utilizzare le attività Grunt o Gulp.

Per precaricare le viste, possiamo usare $templateCache object. Questo è un oggetto, dove angolare memorizza ogni vista ricevuta dal server.

È possibile utilizzare il modulo html2js , che convertirà tutte le nostre viste in un modulo - file js. Quindi avremo bisogno di iniettare quel modulo nella nostra applicazione e basta.

Per creare un file concatenato di tutte le viste possiamo usare questa attività

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']);
};

Per utilizzare questo metodo di concatinazione, è necessario apportare 2 modifiche: nel file index.html è necessario fare riferimento al file di visualizzazione concatenato

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

Nel file, dove stai dichiarando la tua app, devi iniettare la dipendenza

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

Se si utilizzano router popolari come ui-router , non ci sono cambiamenti nel modo in cui si fa riferimento ai modelli

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

    })

Ottimizzazione dello script

È buona norma combinare i file JS e ridurli al minimo. Per progetti più grandi potrebbero esserci centinaia di file JS e aggiunge latenza inutile per caricare ogni file separatamente dal server.

Per la minimizzazione angolare è necessario avere tutte le funzioni annotate. Quello in necessario per la dipendenza da una dipendenza angolare è una corretta minifrizione. (Durante la minificazione, i nomi delle funzioni e le variabili verranno rinominati e interromperà l'iniezione della dipendenza se non verranno intraprese ulteriori azioni.)

Durante la minificaiton $scope e myService variabili saranno sostituiti da altri valori. L'iniezione di dipendenza angolare funziona in base al nome, pertanto questi nomi non dovrebbero cambiare

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

Angolare comprenderà la notazione dell'array, poiché la minificazione non sostituirà i valori letterali stringa.

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

• In primo luogo concatideremo tutti i file end-to-end.
• In secondo luogo useremo il modulo ng-annotate , che preparerà il codice per la minimizzazione
• Infine applicheremo il modulo uglify .

module.exports = function (grunt) {// imposta qui il percorso degli script per riutilizzarlo nel codice 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']);
};