AngularJS利用時のMinify（ファイル圧縮）適用の注意事項 #JavaScript

書籍「Mastering Web Application Development with AngularJS」の「Chapter 12. Packaging and Deploying AngularJS」で記載されていた"minification-safe"な記述方法のところを読んで、意外なAngularJSの弱点を知りました。

AngularJSのDependenciesを調べる方法は、実はFunctionをtoStringの結果から正規表現で行っているそうです。
ドキュメントを読み込んでいればわかることであるかもしれませんが、私は上記の書籍で知ることになりました。

その結果、どんな問題が発生するかというとminifyしたために正常にDependenciesが認識されなくなるという致命的な問題が発生する可能性があります。
例えば下記のようなソースコードを書いているとします。

angular.module ( 'hoge' , ['resources.projects'])
    .controller( 'HogeViewCtrl' , function ($scope, $location) {
        //controller's code
    });

minifyすると

angular.module ( 'hoge' , ['resources.projects'])
    .controller( 'HogeViewCtrl' , function (e, f) {
        //controller's code
    });

というように、パラメータに使われていた変数名が圧縮されてしまい、定義されているModuleやServiceなどと依存性が失われてしまうのです。

これを回避するためにAngularJSは、配列を使って定義を記述します。なぜ配列を使っているのかという理由は、このMinifyにより依存性が失われてしまう点を回避しているのでした。

angular.module ( 'hoge' , ['resources.projects'])
    .controller( 'HogeViewCtrl' , ["$scope", "$location", function ($scope, $location) {
        //controller's code
    }]);

上記のように書くとminifyされても、配列で定義したパラメータの名前が残るため、AngularJSの仕組み上依存関係は崩れず問題になりません。

規模の大きいプロジェクトでは、Javascriptファイルの容量は大きくなり快適なユーザ操作を提供するためにminifyすることは大前提になってくるはずです。その際に、気を付けるべきことは、関数のパラメータと配列で定義した重複するパラメータの依存関係をリファクタリング時に壊さないように気を付けることであると記述されています。

（何かサポートしてくれるものがあればいいのですが、それはIDEで回避できるのかもしれませんが情報は今のところ手元にありません。）

以上、AngularJSでMinify（ファイル圧縮）する際に注意するべきは、定義時の配列形式にあることを取りまとめさせていただきました。