AngularJS2で本番向けにdistしてみる
なぜ本番向けの出力を作るのか
通信負荷を低減させ、サイトへのアクセス速度を向上させるために本番向けのデータは軽量であるべきです。しかしAngularJS2をそのまま使用すると（単純なhello worldを出力するものであっても）約14MB程度のファイルダウンロードが必要となってしまします。
|
1 2 |
$ls -lha 1.4M bundle.js |
このファイルは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送ってみたらマージされました。
|
1 |
$git clone https://github.com/mgechev/angular2-simple-build.git |
ファイル一覧は以下となります。
|
1 2 3 4 5 6 7 8 9 |
. ├── README.md ├── app │ ├── app.component.ts │ ├── app.module.ts │ └── main.ts ├── index.html ├── package.json └── tsconfig.json |
package.jsonが入っているのでnpm iでインストールできます。
|
1 2 3 |
$ npm i $ npm run build_prod $ npm run serve |
build_prodを実行した時点でdistディレクトリが生成され、ファイルが配置されます。bundle.jsが無加工のファイルで、bundle.min.jsがminify化したファイルです。minifyで1.4Mから536Kまで縮小されてます。
|
1 2 |
-rw-r--r-- 1 xxx 713033059 1.4M 12 1 23:18 bundle.js -rw-r--r-- 1 xxx 713033059 536K 12 1 23:18 bundle.min.js |
そこから更にgzip圧縮すると130KBまで圧縮されました。だいぶ現実的な値にはなってきましたね。
|
1 |
$ gzip bundle.min.js |
|
1 2 3 |
-rw-r--r-- 1 xxx 713033059 1.4M 12 1 23:18 bundle.js -rw-r--r-- 1 xxx 713033059 536K 12 1 23:18 bundle.min.js -rw-r--r-- 1 xxx 713033059 130K 12 1 23:18 bundle.min.js.gz |
次回はtree-shakingを試してみたいところ。