網(wǎng)頁(yè)性能優(yōu)化是每個(gè) Web 應(yīng)用開(kāi)發(fā)者都關(guān)注的首要問(wèn)題。Grunt 等任務(wù)運(yùn)行器在開(kāi)發(fā)過(guò)程中扮演著關(guān)鍵角色，它們自動(dòng)化了代碼拼接和壓縮等任務(wù)，這也是本教程的重點(diǎn)。我們將使用一系列 Grunt 插件來(lái)確保 AngularJS 應(yīng)用能夠安全地進(jìn)行壓縮。在討論 AngularJS 和壓縮之前，我想強(qiáng)調(diào)一點(diǎn)，所有技能水平的開(kāi)發(fā)者都能從本教程中受益，但最好具備 Grunt 的基礎(chǔ)知識(shí)。在本文中，我們將使用 Grunt 生成新文件夾，因此 Grunt 新手也能很好地了解其工作原理。

關(guān)鍵要點(diǎn)

• 像 Grunt 這樣的任務(wù)運(yùn)行器自動(dòng)化了代碼拼接和壓縮，優(yōu)化了開(kāi)發(fā)過(guò)程中的頁(yè)面速度。Grunt 插件確保 AngularJS 應(yīng)用能夠安全地進(jìn)行壓縮。
• 默認(rèn)情況下，AngularJS 應(yīng)用并非壓縮安全的，必須使用數(shù)組語(yǔ)法編寫(xiě)。當(dāng) UglifyJS 運(yùn)行時(shí)，它會(huì)重命名參數(shù)，但數(shù)組中 DI 注解的存在阻止了它們被重命名，確保重命名的參數(shù)仍然可以訪(fǎng)問(wèn)必要的依賴(lài)項(xiàng)。
• Grunt 可用于自動(dòng)化 AngularJS 應(yīng)用的注解、拼接和壓縮過(guò)程。安裝必要的插件并將 Grunt 配置為讀取“package.json”文件后，任務(wù)將被加載和注冊(cè)。然后配置插件以定位特定文件。
• Grunt 通過(guò)自動(dòng)化捕獲和防止錯(cuò)誤的任務(wù)來(lái)幫助編寫(xiě)更安全的 Angular 代碼。它可以在每次保存文件時(shí)對(duì)代碼運(yùn)行單元測(cè)試，立即向開(kāi)發(fā)者發(fā)出錯(cuò)誤警報(bào)。自動(dòng)化節(jié)省了時(shí)間，并確保不會(huì)忽略重要任務(wù)。

Angular 應(yīng)用壓縮的問(wèn)題

默認(rèn)情況下，AngularJS 應(yīng)用并非壓縮安全的。它們必須使用數(shù)組語(yǔ)法編寫(xiě)。如果您不確定數(shù)組語(yǔ)法是什么，您可能已經(jīng)編寫(xiě)過(guò)使用它的代碼了。讓我們來(lái)看兩個(gè) AngularJS 控制器示例，這兩個(gè)控制器正在傳遞 $scope 和 $http 參數(shù)。在下面的第一個(gè)示例中，模塊的工廠(chǎng)和控制器包裝在以 DI 注解開(kāi)頭的數(shù)組中，如您所見(jiàn)，它不遵循 DRY（不要重復(fù)自己）原則。

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

在下一個(gè)示例中，crud.config 模塊代碼仍然不是壓縮安全的，但代碼比之前的代碼短。它只是命名服務(wù)，然后將必要的依賴(lài)項(xiàng)作為參數(shù)傳遞到函數(shù)中，而無(wú)需先將它們作為字符串寫(xiě)出來(lái)。只要不進(jìn)行壓縮，這段代碼就可以正常運(yùn)行。因此，很容易理解為什么人們?cè)诰帉?xiě) AngularJS 代碼時(shí)經(jīng)常選擇這種語(yǔ)法。

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

既然您已經(jīng)了解了這兩段代碼的物理差異，我將快速解釋為什么這種語(yǔ)法不適合壓縮。

數(shù)組表示法的運(yùn)作方式

如上所述，數(shù)組表示法以 DI 注解開(kāi)頭，這在使代碼壓縮安全方面起著關(guān)鍵作用。當(dāng) UglifyJS 運(yùn)行時(shí)，它會(huì)將我們的參數(shù)從 $scope 和 $http 分別重命名為 a 和 b。作為字符串傳遞到數(shù)組中的 DI 注解的存在阻止了它們被重命名。因此，這些重命名的參數(shù)仍然可以訪(fǎng)問(wèn)必要的依賴(lài)項(xiàng)。如果這些注解不存在，代碼將中斷。如您所見(jiàn)，以這種方式手動(dòng)編寫(xiě)代碼非常低效。為了幫助您避免這種情況，我現(xiàn)在將展示如何使用 Grunt 以完全優(yōu)化的方式對(duì) AngularJS 應(yīng)用進(jìn)行注解、拼接和壓縮，并使其準(zhǔn)備好用于生產(chǎn)環(huán)境。

使用 Grunt

可以在 GitHub 上找到項(xiàng)目的整個(gè)存儲(chǔ)庫(kù)，包括我們將要定位的文件。對(duì)于那些習(xí)慣使用 Grunt 的人，可以隨意繼續(xù)操作并創(chuàng)建您自己的構(gòu)建，或?qū)⒋舜a添加到現(xiàn)有項(xiàng)目中。如果您正在使用空目錄，則必須確保目錄中有一個(gè)“package.json”文件。可以通過(guò)運(yùn)行命令 npm init 來(lái)創(chuàng)建此文件。一旦您的項(xiàng)目中有了“package.json”文件，就可以通過(guò)運(yùn)行以下命令下載插件：

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

這會(huì)將 Grunt 安裝到您的項(xiàng)目中，以及我們將使用的三個(gè)插件：

• grunt-contrib-concat
• grunt-contrib-uglify
• grunt-ng-annotate

盡管 ng-annotate 可以不用 Grunt 使用，但您很快就會(huì)看到 Grunt 使注解、拼接和壓縮代碼的過(guò)程多么無(wú)縫。它為壓縮 AngularJS 代碼提供了一個(gè)簡(jiǎn)單而有效的解決方案。如果您是從頭開(kāi)始跟蹤此項(xiàng)目，則應(yīng)該在項(xiàng)目根目錄中有一個(gè) Gruntfile.js，它將包含所有 Grunt 代碼。如果您還沒(méi)有，請(qǐng)立即創(chuàng)建它。

三步生成壓縮安全的代碼

步驟 1 – 配置 Grunt 以讀取“package.json”文件

要訪(fǎng)問(wèn)我們之前安裝的插件，您首先需要配置 Gruntfile 的 pkg 屬性以讀取“package.json”文件的內(nèi)容。config 對(duì)象從 Grunt 包裝函數(shù)的頂部開(kāi)始，在下面的示例中從第 3 行到第 5 行擴(kuò)展，但很快就會(huì)包含大部分代碼。

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

步驟 2 – 加載和注冊(cè) Grunt 任務(wù)

在配置 Grunt 以讀取我們的“package.json”文件后，需要加載插件，以便 Grunt 可以訪(fǎng)問(wèn)它們。這是通過(guò)將插件的名稱(chēng)作為字符串傳遞到 grunt.loadNpmTask() 中來(lái)完成的。務(wù)必確保這些插件是在包裝函數(shù)內(nèi)部但config 對(duì)象外部加載的。如果沒(méi)有滿(mǎn)足這些條件，Grunt 將無(wú)法正常工作。接下來(lái)我們需要做的是創(chuàng)建一個(gè)默認(rèn)任務(wù)，當(dāng) Grunt 在沒(méi)有特定目標(biāo)的情況下被調(diào)用時(shí)將執(zhí)行此任務(wù)。您應(yīng)該注意添加這些任務(wù)的順序，因?yàn)樗鼈儗⒏鶕?jù)其配置運(yùn)行。在這里，ngAnnotate 配置為首先運(yùn)行，然后是 concat 和 UglifyJS，我相信這是構(gòu)建代碼的最佳方式。此外，重要的是要記住，grunt.registerTask() 必須放在加載插件之后。根據(jù)我們剛才討論的內(nèi)容，Gruntfile.js 應(yīng)該如下所示：

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

步驟 3 – 配置插件

ngAnnotate

現(xiàn)在我們的 Gruntfile 已準(zhǔn)備就緒，讓我們回到 config 對(duì)象中，并指定我們希望 ngAnnotate 插件定位的文件。為此，我們首先必須為 ngAnnotate 創(chuàng)建一個(gè)部分并創(chuàng)建一個(gè)目標(biāo)，在本例中稱(chēng)為 spApp。在此目標(biāo)中，您將指定要向其添加 DI 注解的文件，以及應(yīng)將其生成的文件夾。在此示例中，Grunt 將獲取在 public/js 中指定的三個(gè)文件，并將它們生成到名為 public/min-safe 的新文件夾中。配置完成后，您可以運(yùn)行 grunt ngAnnotate 并查看代碼的生成方式。此外，您可以訪(fǎng)問(wèn) grunt-ng-annotate 的 GitHub 頁(yè)面，并查看它允許您指定的不同選項(xiàng)。

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

拼接

現(xiàn)在您已經(jīng)生成了一個(gè)包含新注解的 AngularJS 代碼的文件夾，讓我們繼續(xù)通過(guò)編譯或?qū)⒋舜a拼接成一個(gè)單一文件。與我們?yōu)?ngAnnotate 創(chuàng)建部分的方式相同，我們現(xiàn)在將為 concat 和 UglifyJS 執(zhí)行相同的操作。與 ngAnnotate 一樣，這兩個(gè)任務(wù)都接受一個(gè)目標(biāo)，在本例中為 js?？梢詫⒃S多配置選項(xiàng)傳遞到這些任務(wù)中，但我們只是簡(jiǎn)單地指定 src 和 dest 以指向正確文件。正如您可能猜到的那樣，這些插件將獲取傳遞到 src 對(duì)象的文件內(nèi)容，并將它們處理到 dest 后面指定的文件夾中。讓我們嘗試?yán)斫膺@里發(fā)生了什么。您可以通過(guò)在終端中運(yùn)行 grunt concat 來(lái)測(cè)試這一點(diǎn)，它應(yīng)該導(dǎo)致創(chuàng)建 ./public/min/app.js。

var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);

壓縮

我們需要做的最后一件事是從代碼中刪除無(wú)用的空間，方法是壓縮它。這就是 UglifyJS 插件發(fā)揮作用的地方。在使用 UglifyJS 時(shí)，我們希望 Grunt 完成壓縮應(yīng)用程序的最終過(guò)程。因此，我們要定位包含所有新拼接代碼的文件，在本例中為 public/min/app.js。要測(cè)試這一點(diǎn)，請(qǐng)運(yùn)行 grunt uglify，并查看您新壓縮的文件。以下是此任務(wù)的相關(guān)配置：

var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});

在本課程中，我們分別使用了所有這些任務(wù)。現(xiàn)在，讓我們使用之前創(chuàng)建的默認(rèn)任務(wù)。它允許 Grunt 按注冊(cè)順序一個(gè)接一個(gè)地運(yùn)行所有指定的任務(wù)?，F(xiàn)在，只需在項(xiàng)目中運(yùn)行 grunt，您的代碼就會(huì)被注解、拼接和壓縮。

結(jié)論

我希望通過(guò)本簡(jiǎn)短教程，您能夠很好地理解數(shù)組表示法，以及為什么它對(duì)于使 AngularJS 應(yīng)用壓縮安全至關(guān)重要。如果您是 Grunt 新手，我強(qiáng)烈建議您嘗試使用這些插件以及其他插件，因?yàn)樗鼈兛梢怨?jié)省大量時(shí)間。與往常一樣，請(qǐng)隨時(shí)在下方發(fā)表評(píng)論，或者如果有什么問(wèn)題，請(qǐng)通過(guò)我的個(gè)人資料中的地址給我發(fā)送電子郵件。

關(guān)于使用 Grunt 進(jìn)行壓縮安全的 Angular 代碼的常見(jiàn)問(wèn)題解答 (FAQ)

(此處應(yīng)包含與原文中相同的FAQ部分，但語(yǔ)言更流暢自然)

以上是5分鐘到最小的角度代碼與咕unt聲的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！