AngularJS
Förbered dig för produktion - Grunt

Visa förbelastning

När den första visningen begärs gör Angular normalt XHR begäran om att få den vyn. För medelstora projekt kan visningsantalet vara betydande och det kan bromsa applikationens lyhördhet.

Den goda praxisen är att förbelasta alla vyer samtidigt för små och medelstora projekt. För större projekt är det bra att samla dem i vissa meningsfulla bulkar också, men vissa andra metoder kan vara praktiska för att dela upp lasten. För att automatisera denna uppgift är det praktiskt att använda Grunt- eller Gulp-uppgifter.

För att förbelasta vyerna kan vi använda $templateCache objekt. Det är ett objekt där vinkel lagrar varje mottagen vy från servern.

Det är möjligt att använda html2js modulen, som konverterar alla våra vyer till en modul - js-fil. Då måste vi injicera den modulen i vår applikation och det är det.

För att skapa sammanlänkad fil med alla vyer kan vi använda den här uppgiften

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

För att använda det här sättet med concatination måste du göra två ändringar: I din index.html fil måste du referera till den sammanfogade visningsfilen

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

I filen, där du deklarerar din app, måste du injicera beroendet

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

Om du använder populära routrar som ui-router finns det inga förändringar i vägen, hur du refererar till mallar

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

    })

Skriptoptimering

Det är bra att kombinera JS-filer tillsammans och minifiera dem. För större projekt kan det finnas hundratals JS-filer och det lägger till onödig latens för att ladda varje fil separat från servern.

För vinkelförminskning krävs att alla funktioner är kommenterade. Det nödvändigt för vinkelberoende injektion korrekt minificaiton. (Under minifiering byts namn på funktionsnamn och variabler och det kommer att bryta beroendeinjektionen om inga extra åtgärder kommer att vidtas.)

Under minificaiton kommer $scope och myService variabler att ersättas med några andra värden. Vinkelberoendeinjektion fungerar baserat på namnet, därför bör dessa namn inte ändras

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

Vinkelformat kommer att förstå matrisnotationen, eftersom minifiering inte kommer att ersätta strängbokstäver.

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

• För det första kommer vi att koncentrera alla filer från slutet till slut.
• För det andra kommer vi att använda ng-annotate , som kommer att förbereda kod för minifiering
• Slutligen kommer vi att tillämpa uglify modul.

module.exports = funktion (grynt) {// ställa in platsen för dina skript här för att återanvända det i kod 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']);
};