AngularJS
Bereid je voor op productie - grunt

Vooraf laden bekijken

Wanneer de eerste keer om weergave wordt gevraagd, doet Angular normaal XHR verzoek om die weergave te krijgen. Voor middelgrote projecten kan het aantal weergaven aanzienlijk zijn en kan het de reactietijd van de toepassing vertragen.

Het is een goede gewoonte om alle weergaven in één keer vooraf te laden voor kleine en middelgrote projecten. Voor grotere projecten is het goed om ze ook in enkele zinvolle bulks samen te voegen, maar sommige andere methoden kunnen handig zijn om de belasting te splitsen. Om deze taak te automatiseren is het handig om Grunt- of Gulp-taken te gebruiken.

Om de views vooraf te laden, kunnen we het $templateCache object gebruiken. Dat is een object, waarin hoekig elk ontvangen beeld van de server opslaat.

Het is mogelijk om de html2js module te gebruiken, die al onze weergaven converteert naar één module - js-bestand. Dan moeten we die module in onze applicatie injecteren en dat is alles.

We kunnen deze taak gebruiken om een aaneengeschakeld bestand van alle weergaven te maken

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

Om deze manier van concatinatie te gebruiken, moet u 2 wijzigingen aanbrengen: In uw index.html bestand moet u verwijzen naar het aaneengeschakelde weergavebestand

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

In het bestand waarin u uw app declareert, moet u de afhankelijkheid injecteren

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

Als u populaire routers zoals ui-router , zijn er geen wijzigingen in de manier waarop u naar sjablonen verwijst

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

    })

Script optimalisatie

Het is een goede gewoonte om JS-bestanden te combineren en ze te verkleinen. Voor een groter project kunnen er honderden JS-bestanden zijn en het voegt onnodige latentie toe om elk bestand afzonderlijk van de server te laden.

Voor hoekige verkleining moeten alle functies geannoteerd zijn. Dat is nodig voor de juiste minificaiton injectie van hoekafhankelijkheid. (Tijdens het verkleinen zullen functienamen en variabelen worden hernoemd en het zal de afhankelijkheidsinjectie onderbreken als er geen extra acties worden ondernomen.)

Tijdens minificaiton worden $scope en myService variabelen vervangen door enkele andere waarden. Injectie van hoekafhankelijkheid werkt op basis van de naam, daarom moeten deze namen niet veranderen

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

Angular begrijpt de matrixnotatie, omdat minification geen stringliteralen vervangt.

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

• Eerst zullen we alle bestanden end-to-end samenvoegen.
• Ten tweede zullen we de ng-annotate module gebruiken, die de code zal voorbereiden voor minificatie
• Tot slot zullen we de uglify module toepassen.

module.exports = function (grunt) {// stel hier de locatie van uw scripts in voor hergebruik 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']);
};