Vueのバージョンは 2.7.15 です。
Vueで作っているところで、明らかにページに描画される部品が多くなると描画が遅くなると感じられるページがありました。
部品が多くなると、古いPCではページがフリーズしてしまうことも(>_<)
Chromeのデベロッパーツールで調査してみました。
Chrome デベロッパーツール でまずNetworkを確認し、サーバー側などで時間がかかっているわけではないのを確認します。(ここは省略)
Chromeの デベロッパーツール で メモリがどれぐらい使われているか確認します。
下記の画面の、一番左上の二重丸をクリックし、Heap Snapshotというのを取ります。
ででん!
array というのが105万個もあります。( ゚Д゚) そして、これが約120Mもメモリを使っています。
なんだ…?こいつらッ
105万個という数にヤバさを感じますね!!
これ、クリックすると中身が見れるんですが、見るとあんまり関係ないのもあるので辛抱強く見ていくと、なんか見覚えのあるプロパティ名がずらっと出てたりもします。
で、いくつかのパターンでメモリを取得してみると、このarray というのが増えたり減ったりしていて(ある時は半分の50万個ぐらい)ページの中で繰り返し描画されているコンポーネントの関係があるのでは?と思われました。
で、Vueの$dataってリアクティブなので、こうやってメモリ上に確保されているのかなと思い当たり、繰り返しのあるComponentの$dataに大き目のオブジェクトがあったりしたので、それを使わないようにしてみたら、劇的に改善しました。
arrayの数は 105万個 →175個になり、メモリも約135Kになりました!桁違いすぎる(笑)
array のすぐ上の、compiled codeというのも劇的に少なくなっています。
結果、ページ速度も改善し、動きがよくなりました!
Vueでメモリをいっぱい使っている、で検索すると、メモリリークの話ばっかり出てくるので、ここに書いておきます。
まれにこのChrome デベロッパーツール でメモリを測定する機能が壊れているというかなんというか、おかしくなる時があります。
そういう時は、Chromeを再起動してみましょう。
そんなにVue.jsに詳しいわけではないので、色々間違っていたらすみません。