SIBYL System

AngularJS2で本番向けにdistしてみる

angular2

なぜ本番向けの出力を作るのか

通信負荷を低減させ、サイトへのアクセス速度を向上させるために本番向けのデータは軽量であるべきです。しかしAngularJS2をそのまま使用すると(単純なhello worldを出力するものであっても)約14MB程度のファイルダウンロードが必要となってしまします。

このファイルはAngularJS2フレームワークを使ってhello worldを実行するだけの簡単なプログラムです。実際のサービスプロダクトを作る場合はこれ以上に大きなサイズとなってしまうのは明白です。3G回線で14MBのファイルをダウンロードするのは非常に厳しいので、本番向けにはスリム化が必須となります。

Angular JS2のプロダクションリリースについて調べていたら、以下のサイトを見つけたので試してみました。
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

縮小化(minify)と圧縮(compression)

以下のリポジトリを用意しました。git cloneしてファイルを取得します。(元のブログ執筆者のリポジトリではnpm iとnpm run build_prodでコケるのでフォーク版です。)PR送ってみたらマージされました

ファイル一覧は以下となります。

package.jsonが入っているのでnpm iでインストールできます。

build_prodを実行した時点でdistディレクトリが生成され、ファイルが配置されます。bundle.jsが無加工のファイルで、bundle.min.jsがminify化したファイルです。minifyで1.4Mから536Kまで縮小されてます。

そこから更にgzip圧縮すると130KBまで圧縮されました。だいぶ現実的な値にはなってきましたね。

 

 

次回はtree-shakingを試してみたいところ。

モバイルバージョンを終了