注) この記事は試行錯誤の記録です。従って間違いが数多く含まれている可能性が高いです。もっと良い方法を知っている方はぜひ教えてください。
現段階の結論
注） 現在は、rollup.jsでバンドルしています。
system.jsを利用しています。
tsconfig.json, typing.jsonを適切に記載してからtscとuglifyjsを利用して minifyすることで、最終的なfootprintを5kbまで減らすことができました。
（system.jsでxhrが大量に走る問題は下記（system.jsの項）の通りmapとpackageの記載を削除することで解決しました。）
結局、現在はgithubでコミュニティベースで活発に開発されているmgechev/angular2-seed（Angular2公式Githubアカウントのangular/angular2-seedとは別もの）の環境をそのまま利用して、system.jsもwebpackも使わず、gulpですべてのtsをひとつのjsにBundleして利用中です。
方針（理想）
- 自作コード部分以外はCDNで指定したい
- 自作コード部分は読み込み時間が最小になるようにしたい
Angular2を利用するための環境構築にあたって参考になりそうなサンプルを探す
- system.js - Angular2公式サイトの5 MIN QUICKSTARTを参考に
- webpack - Angular2公式Githubアカウントのangular2-seedを参考に
- JSPM - Githubで見つけたdavinkevin/Angular2-Sandboxを参考に
system.js での環境構築を検討してみる
index.html
<script src="https://npmcdn.com/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="https://npmcdn.com/systemjs/dist/system.js"></script>
<script src="https://npmcdn.com/typescript/lib/typescript.js"></script>
<script src="https://npmcdn.com/@reactivex/rxjs/dist/global/Rx.min.js"></script>
<script src="https://npmcdn.com/angular2/bundles/angular2.js"></script>
<script src="https://npmcdn.com/angular2/bundles/router.min.js"></script>
<script src="https://npmcdn.com/angular2/bundles/http.min.js"></script>
<script src="config.js"></script>
<script>
System.import('app/main')
.then(null, console.error.bind(console));
</script>
config.js
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
map: {
//'rxjs': "https://npmcdn.com/@reactivex/rxjs/src"
},
packages: {
app: {
defaultExtension: 'ts'
},
//'rxjs': {defaultExtension: 'ts'}
}
});
index.htmlへの記載はすべてcdnからの読み込みにしてみた。
が、、、rxjs関連のファイルを大量にxhrして読み込み完了までに10秒程度かかってるぞ？あきらかに必要ないファイルまで読み込んでる感じ、、、。
うーん。これどう解決したらいいんだ？
（大量のファイルの読み込み問題はconfig.js内でのrxjsの指定を削除して解決しました！）
あとは自作コード部分をひとまとめにbundleしたい。これを解決するのはJSPM？ （tscで解決しました。tscでbuildしたあとにuglifyjsでminifyしています）
JSPM での環境構築を検討してみる
上記の問題を解決してくれそうなJSPMだが、angular2.jspm.md辺りの議論やTypeScript + jspm 触って消耗した話なんかを見てもまだ時期尚早な気がすると思いつつ、ちょっと環境構築を試みるもエラーが頻発
その後、davinkevin/Angular2-Sandboxをgit cloneしたあと（このサンプルがこのままでは動かないので）下記のようにしてcryptoモジュールを追加。
npm install
jspm install crypto
その後、
system.js込みのbundle.jsを作成
jspm bundle-sfx app/main.ts dist/bundle.js
system.jsを含んでいないbundle.jsを作成
jspm bundle app/main.ts dist/bundle.js --minify --no-mangle
で、動作はしたけど、自作部分のみをbundleするためにはどうして良いやら・・・。
ただ、Webpackで出来上がるbundle.jsよりはサイズが小さいみたい。
webpack での環境構築を検討してみる
ng-japan 2016でメモして帰ってきたangular2-webpack-starter-minimumを試してみた。
が、buildしてみると生成されるjsが10MB以上ある、、、。えっと、、、何かがおかしいことは明らかでいろいろパラメーターをいじってみたらもっと小さくなるのかも知れないが、とりあえず他の環境を試してみることにする。
Githubでもっと良い方法がないか検索して探してみる
Githubで検索するとmgechev/angular2-seedの更新が活発なようだ。このプロジェクトではgulpでオリジナルbuild環境を整えているようだ。
試しにこれでbuildしてみると、prod環境のjsのサイズが全部ひとまとめで1MB以下でとりあえず1秒以内には読み込みが完了する。（もっと速くしたいけど、、、）
よし、もうとりあえずこれでいっとこう。（現時点での結論）
理想的にはここからangular2の本体部分なんかを分離してCDNで指定して、自作コード部分のみにしてもっと読み込みを速くしたい。
gulpのsrcを指定している部分で!でexclude指定すればいけるような気がして試行錯誤してみたが時間切れでギブアップ。