AngularJS
Prepararse para la producción - Grunt

Ver precarga

Cuando se solicita la primera vista, normalmente Angular realiza una solicitud XHR para obtener esa vista. Para proyectos de tamaño medio, el recuento de vistas puede ser significativo y puede ralentizar la capacidad de respuesta de la aplicación.

La buena práctica es cargar previamente todas las vistas a la vez para proyectos pequeños y medianos. Para proyectos más grandes, también es bueno agregarlos en algunos bultos significativos, pero algunos otros métodos pueden ser útiles para dividir la carga. Para automatizar esta tarea es útil utilizar tareas Grunt o Gulp.

Para precargar las vistas, podemos usar el objeto $templateCache . Ese es un objeto, donde angular almacena cada vista recibida del servidor.

Es posible usar el módulo html2js , que convertirá todas nuestras vistas en un módulo: archivo js. Entonces necesitaremos inyectar ese módulo en nuestra aplicación y eso es todo.

Para crear un archivo concatenado de todas las vistas podemos usar esta tarea.

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

Para usar esta forma de concatinación, necesita hacer 2 cambios: En su archivo index.html necesita hacer referencia al archivo de vista concatenada

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

En el archivo, donde está declarando su aplicación, necesita inyectar la dependencia

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

Si está utilizando enrutadores populares como el enrutador ui-router , no hay cambios en la forma en que hace referencia a las plantillas.

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

    })

Optimización de scripts

Es una buena práctica combinar los archivos JS y minimizarlos. Para proyectos más grandes, podría haber cientos de archivos JS y agrega una latencia innecesaria para cargar cada archivo por separado del servidor.

Para la minificación angular se requiere tener todas las funciones anotadas. Eso es necesario para la inyección de dependencia angular adecuada minificación. (Durante la minificación, los nombres de las funciones y las variables serán renombrados y se interrumpirá la inyección de dependencia si no se toman acciones adicionales).

Durante minificaiton $scope y myService variables serán reemplazadas por algunos otros valores. La inyección de dependencia angular funciona según el nombre, como resultado, estos nombres no deben cambiar

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

Angular entenderá la notación de matriz, porque la minificación no reemplazará los literales de cadena.

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

• En primer lugar vamos a concatinar todos los archivos de extremo a extremo.
• En segundo lugar usaremos el módulo ng-annotate , que preparará el código para la minificación.
• Finalmente uglify módulo uglify .

module.exports = function (grunt) {// configura la ubicación de tus scripts aquí para reutilizarlos en el código 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']);
};