AngularでPageSpeed Insightsの点数を95まで上げるためにやったことまとめ

前回の続きです！

前回やったこと
① Angular8（Ivy）を使う
② webpack-bundle-analyzerで分析
③ scssのimport修正
④ rxjsのインポート修正

これらに加えて今回は「⑤ モジュール切ってlazyloadingする」を試してみました。

⑤ モジュール切ってlazyloadingする

もともとこんなに大きいプロジェクトになるとは考えていなくてモジュール分割すらしていなかったので、リファクタリングはちょっと手間でした。遅延ロードするつもりがなかったらモジュール切る必要ない的なことをlaco氏もゆっていた（気がする）。次からは遅延ロード前提で設計しますよって…ほんと
今回は最低限のところでゴリ重い部分を別立てに変更しました。

$ npm run ng -- build --prod
chunk {0} runtime-es2015.b688023b6445448344f9.js (runtime) 2.23 kB [entry] [rendered]
chunk {0} runtime-es5.b688023b6445448344f9.js (runtime) 2.23 kB [entry] [rendered]
chunk {1} main-es2015.a4613797bdc31873d0f1.js (main) 916 kB [initial] [rendered]
chunk {1} main-es5.a4613797bdc31873d0f1.js (main) 993 kB [initial] [rendered]
chunk {2} polyfills-es2015.f40835661c1c4511f3cc.js (polyfills) 84.3 kB [initial] [rendered]
chunk {3} polyfills-es5.e30421bb0cc42e77e977.js (polyfills-es5) 170 kB [initial] [rendered]
chunk {5} 5-es2015.89670f40f2237ea5bc12.js () 706 kB  [rendered]
chunk {5} 5-es5.89670f40f2237ea5bc12.js () 716 kB  [rendered]
chunk {4} styles.66ace95ede0b65a04357.css (styles) 73.7 kB [initial] [rendered]
chunk {scripts} scripts.e454dd0842cd3c67f3c5.js (scripts) 127 kB [entry] [rendered]
Date: 2019-10-11T03:45:43.988Z - Hash: 1288366dfd589dc7fe23 - Time: 41447ms

Initial: 1.074MB（85%減）
Time: 41447ms（58%減）

やったぜ

ビルド時間が④までの施策と比べて若干遅くなってるのは、コンパイラをIvyからデフォルトに戻したせいもあると思います。（IvyだとSSR対応がまだ微妙っぽいので…）

1MB切れなかったのは残念ですがいったんこれでよしとして表示速度を計測しました。

結果発表

1. デスクトップ表示

before

after

ｵﾗーーーー!!!!!!!!!!!!!👊👊👊

2. モバイル表示

before

after

ﾔﾊﾞﾔﾊﾞからｿｺｿｺまでのｶｲｾﾞﾝーーーー

はい。

おわりに

時間があったので開発中は見て見ぬ振りをし続けていた（見ろ）バンドルサイズ問題の対応しました。こんなことになる前に設計をきちんとしよう！そしてCLIの警告には真摯に従おう！
モバイル利用前提の場合はけっこうしっかり速度対応やっていかないと厳しいですね。