AngularJS
Przygotuj się do produkcji - chrząknięcie

Zobacz wstępne ładowanie

Kiedy żądany jest pierwszy widok, zwykle Angular XHR żądanie XHR aby uzyskać ten widok. W przypadku projektów średniej wielkości liczba wyświetleń może być znacząca i spowalniać reakcję aplikacji.

Dobrą praktyką jest wstępne ładowanie wszystkich widoków jednocześnie dla małych i średnich projektów. W przypadku większych projektów dobrze jest agregować je w kilka znaczących ilości, ale niektóre inne metody mogą być przydatne do podziału obciążenia. Aby zautomatyzować to zadanie, przydatne jest użycie zadań Grunt lub Gulp.

Aby wstępnie załadować widoki, możemy użyć obiektu $templateCache . Jest to obiekt, w którym kątowy przechowuje każdy odebrany widok z serwera.

Możliwe jest użycie modułu html2js , który przekonwertuje wszystkie nasze widoki na jeden moduł - plik js. Następnie będziemy musieli wprowadzić ten moduł do naszej aplikacji i to wszystko.

Aby utworzyć połączony plik wszystkich widoków, możemy użyć tego zadania

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

Aby skorzystać z tego sposobu konkatynacji, musisz wprowadzić 2 zmiany: W pliku index.html należy odwoływać się do pliku widoku konkatenowanego

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

W pliku, w którym deklarujesz swoją aplikację, musisz wprowadzić zależność

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

Jeśli korzystasz z popularnych routerów, takich jak ui-router , nie ma żadnych zmian w sposobie odwoływania się do szablonów

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

    })

Optymalizacja skryptu

Dobrą praktyką jest łączenie plików JS i ich minimalizowanie. W przypadku większego projektu mogą istnieć setki plików JS i powoduje to niepotrzebne opóźnienie w ładowaniu każdego pliku osobno od serwera.

W przypadku minimalizacji kątowej wymagane jest opatrzenie wszystkich funkcji adnotacjami. Jest to konieczne do prawidłowego wstrzyknięcia zależności kątowej. (Podczas minimalizacji nazwy funkcji i zmienne zostaną zmienione i przerwie wstrzykiwanie zależności, jeśli nie zostaną podjęte żadne dodatkowe działania).

Podczas minificaiton $scope i myService zmienne zostaną zastąpione innymi wartościami. Wstrzykiwanie zależności kątowej działa na podstawie nazwy, w wyniku czego nazwy te nie powinny się zmieniać

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

Angular zrozumie notację tablicową, ponieważ minimalizacja nie zastąpi literałów łańcuchowych.

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

• Najpierw połączymy wszystkie pliki od końca do końca.
• Po drugie użyjemy modułu ng-annotate adnotate, który przygotuje kod do minimalizacji
• Wreszcie zastosujemy moduł uglify .

module.exports = function (grunt) {// skonfiguruj tutaj lokalizację swoich skryptów w celu ponownego użycia w kodzie 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']);
};