source-map-explorerでファイルサイズ削減

普段Angularを使っている
やっぱり気になるのはバンドルサイズ
とはいえただ小さくしていこうと闇雲にやっても仕方がないのでまず可視化をする

そんな時に役に立つのが

github.com

このsource-map-explorerを使用することでバンドルされたファイルのsourcemapをもとに
どのモジュールがどくらいの割合をしめているのかをhtmlに出力してブラウザで確認が出来る

とりあえずビルドした vendor.js(Angular本体とか使用するライブラリが入る) を可視化してみる

$ source-map-explorer vendor.bundle.js vendor.bundle.map

するとブラウザが開き下記のような画面が表示される

f:id:hatappi1225:20170421230752p:plain

おぉー可視化された
全体としては990kbあり例えば@angularはその中の39.2%の389kbを占めているなどを確認できる!!!

とりあえず今回は左下のrxjs(191kb)を削減していく
プロジェクトの中を見るとほとんどの場所で

import { Observable } from 'rxjs/Rx';

これを書いてしまうとrxjs内をすべてとりこんでしまうのでObservableだけ使用するように

import { Observable } from 'rxjs/Observable';

のようにリプレイスしていく
リプレイスしたのち再度ビルドして可視化する

f:id:hatappi1225:20170421233354p:plain

結果191kbあったものが54kbになった

とりあえず今回はrxjsを見ていったけどmomentjsのlocaleもja以外は使わないので削減できそう
可視化すると見えてくるものがあって良い