AngularJS
生産の準備 - グランツ

プリロードを表示する

最初のビューが要求されると、通常Angularはそのビューを取得するためにXHR要求を行います。中規模のプロジェクトでは、ビュー数が重要になり、アプリケーションの応答性が低下する可能性があります。

良い方法 は 、中小規模のプロジェクトですべてのビューを一度にプリロードすることです。大規模なプロジェクトの場合、それらをいくつかの意味のあるまとまりに集約することは良いことですが、負荷を分割するためには他のいくつかの方法が便利です。このタスクを自動化するには、GruntタスクまたはGulpタスクを使用すると便利です。

ビューをプリロードするために、 $templateCacheオブジェクトを使用できます。これはオブジェクトであり、角度はサーバーから受信したすべてのビューを格納します。

すべてのビューを1つのmodule-jsファイルに変換するhtml2jsモジュールを使用することは可能です。次に、そのモジュールをアプリケーションに挿入する必要があります。それはそれです。

すべてのビューの連結ファイルを作成するには、このタスクを使用できます

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

連結のこの方法を使用するには、2つの変更を行う必要があります。あなたにindex.htmlファイルあなたは、連結ビューのファイルを参照する必要があります

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

あなたのアプリケーションを宣言しているファイルで、依存関係を注入する必要があります

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

あなたがui-routerような一般的なルータを使用している場合、途中で変更はありません。どのようにテンプレートを参照していますか？

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

    })

スクリプトの最適化

JSファイルを結合してサイズを小さくすることをお勧めします。大規模なプロジェクトの場合、数百のJSファイルが存在する可能性があり、サーバーから別々に各ファイルをロードするための不要な遅延が追加されます。

角度縮小のためには、すべての機能に注釈を付けることが必要です。角度依存性注入に必要なのは、適切な最小化である。 （細分化中は、関数名と変数の名前が変更され、余分な処理が行われなければ依存関係注入が中断されます。）

minificaiton中に$scopeとmyService変数は他の値に置き換えられます。 Angular dependency injectionは名前に基づいて動作するため、結果としてこれらの名前は変わるべきではありません

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

Angularは配列の表記法を理解します。これは、文字列のリテラルを置換しないためです。

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

• まず、すべてのファイルをエンドツーエンドで連結します。
• 第二に、 ng-annotateモジュールを使用して、拡張用のコードを準備します
• 最後に、 uglifyモジュールを適用します。

module.exports = function（grunt）{//コード内でスクリプトを再利用するためのスクリプトの場所を設定します。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']);
};