普段Angularを使っている
やっぱり気になるのはバンドルサイズ
とはいえただ小さくしていこうと闇雲にやっても仕方がないのでまず可視化をする
そんな時に役に立つのが
このsource-map-explorerを使用することでバンドルされたファイルのsourcemapをもとに
どのモジュールがどくらいの割合をしめているのかをhtmlに出力してブラウザで確認が出来る
とりあえずビルドした vendor.js(Angular本体とか使用するライブラリが入る) を可視化してみる
$ source-map-explorer vendor.bundle.js vendor.bundle.map
するとブラウザが開き下記のような画面が表示される
おぉー可視化された
全体としては990kbあり例えば@angularはその中の39.2%の389kbを占めているなどを確認できる!!!
とりあえず今回は左下のrxjs(191kb)を削減していく
プロジェクトの中を見るとほとんどの場所で
import { Observable } from 'rxjs/Rx';
これを書いてしまうとrxjs内をすべてとりこんでしまうのでObservableだけ使用するように
import { Observable } from 'rxjs/Observable';
のようにリプレイスしていく
リプレイスしたのち再度ビルドして可視化する
結果191kbあったものが54kbになった
とりあえず今回はrxjsを見ていったけどmomentjsのlocaleもja以外は使わないので削減できそう
可視化すると見えてくるものがあって良い
