AngularJS
Bereiten Sie sich auf die Produktion vor - Grunt

Vorladen anzeigen

Wenn die erste Ansicht angefordert wird, fordert Angular normalerweise eine XHR Anforderung an, um diese Ansicht zu erhalten. Für mittelgroße Projekte kann die Anzahl der Ansichten erheblich sein und die Reaktionsfähigkeit der Anwendung verlangsamen.

Es empfiehlt sich, alle Ansichten gleichzeitig für kleine und mittlere Projekte vorab zu laden . Bei größeren Projekten ist es sinnvoll, sie auch in bedeutungsvollen Bänden zusammenzufassen, aber andere Methoden können hilfreich sein, um die Last aufzuteilen. Um diese Aufgabe zu automatisieren, ist es praktisch, Grunt- oder Gulp-Aufgaben zu verwenden.

Um die Ansichten vorab zu laden, können wir das $templateCache Objekt verwenden. Das ist ein Objekt, in dem Angular jede empfangene Ansicht vom Server speichert.

Es ist möglich, das html2js Modul zu verwenden, das alle unsere Ansichten in eine modul-js-Datei konvertiert. Dann müssen wir dieses Modul in unsere Anwendung einspritzen und das war's.

Um eine verkettete Datei aller Ansichten zu erstellen, können Sie diese Aufgabe verwenden

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

Um diese Art der Verkatenung zu verwenden, müssen Sie zwei Änderungen vornehmen: In Ihrer index.html Datei müssen Sie auf die verkettete Ansichtsdatei verweisen

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

In der Datei, in der Sie Ihre App deklarieren, müssen Sie die Abhängigkeit einfügen

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

Wenn Sie gängige Router wie ui-router , ändert sich die Art und Weise, wie Sie auf Vorlagen verweisen

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

    })

Skriptoptimierung

Es ist empfehlenswert , JS-Dateien zusammenzufassen und zu minimieren. Bei größeren Projekten können hunderte von JS-Dateien vorhanden sein, was zu unnötiger Latenz führt, um jede Datei getrennt vom Server zu laden.

Für die Winkelminifizierung müssen alle Funktionen kommentiert werden. Das ist für die Angular-Abhängigkeitsinjektion die richtige Minificaiton. (Während der Minifizierung werden Funktionsnamen und -variablen umbenannt und die Abhängigkeitsinjektion wird unterbrochen, wenn keine zusätzlichen Aktionen ausgeführt werden.)

Während der myService Variablen $scope und myService durch einige andere Werte ersetzt. Angular Dependency Injection arbeitet auf der Grundlage des Namens, daher sollten sich diese Namen nicht ändern

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

Angular wird die Array-Notation verstehen, da die Minifizierung keine String-Literale ersetzt.

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

• Erstens werden wir alle Dateien von Anfang bis Ende zusammenfassen.
• Zweitens verwenden wir das ng-annotate Modul, das den Code für die Minifizierung vorbereitet
• Zum Schluss wenden wir das uglify Modul an.

module.exports = function (grunt) {// Hier können Sie den Ort Ihrer Skripte für die Wiederverwendung im Code einrichten var varlocation = ['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']);
};