Angular2を利用してWebサービスUI開発を行う場合、どうしてもjsファイルのサイズが大きくなり、初期ロードに時間がかかってしまうのが難点です。

angular-cliを利用してプロジェクトを作って開発すれば、簡単にリリース用のJSファイルをAoT対応してgzipファイル化して書き出すことができるようです。

angular-cliでプロジェクト作って2ページ遷移する程度のほとんど実装を追加していないものをビルドしてみます。

今回の実行環境

angular-cli: 1.0.0-beta.28.3
node: 6.10.3
os: macOS Sierra

まずは普通のビルド

プロジェクトフォルダ直下で以下のangular-cliコマンド実行するとdistフォルダが作られリリース用のビルドされたjs等が書き出されます。

ng build

書き出されたファイルサイズはこんな感じ

圧縮されていないのでvendor.bundle.js超でかい！！
ここにAngular2のソースがもりもり入っているっぽいです。

リリース用サイズ縮小化

今度は-prodオプション付きで実行して圧縮してみます。

ng build -prod

書き出されたファイルサイズはこんな感じ

全体的にかなり圧縮されました。gzipファイルを利用できるWebサーバーを利用して公開できるのであればダウンロードされるファイルサイズがかなり小さくできます。Apacheとかだと.htaccessの設定で対応できるっぽいです。参考：gzip圧縮転送についてトコトン調べてみた

• vendor.bundle.jsでは3.3MB → 196KB
• polyfills.bundle.jsでは258KB → 28KB
• main.bundle.jsでは11KB → 4KB

リリース用サイズ縮小化（AoT）

今度は-prodオプションと--aotオプション付きで実行して圧縮＆AoT（Ahead of Time）化してみます。

AoTとは、簡単にいうとページ表示時にAngular2が動的に行うもろもろの処理を前もって解析してソースにハードコーディングすることでアプリケーションの起動速度を高速化するものです。参考：Angular2 AoTコンパイルでTechFeedを高速化した話

ng build -prod --aot

書き出されたファイルサイズはこんな感じ

• vendor.bundle.jsでは196MB → 95KB
• polyfills.bundle.jsでは28KB → 28KB
• main.bundle.jsでは4KB → 5KB(gzip)

まとめ

今回ビルドしたプロジェクトは、アプリケーションの実装内容がほぼない状態の２ページを行ったり来たりできるだけのものだったので、実際にWebアプリケーションをごりごり実装した後にどうなるかはやってみないと分かりません。

しかし、angular-cliを利用してプロジェクトを作って開発すると、面倒な設定全くなしでかなり簡単にリリース用ファイルの圧縮化やAoT化ができることが分かりました。

次は、angular-cliでAngular2モジュールの遅延ロード(lazy load）を試してみます。