Vue.js メモリに大きなデータがあるのを解決する

Vueのバージョンは 2.7.15 です。

Vueで作っているところで、明らかにページに描画される部品が多くなると描画が遅くなると感じられるページがありました。

部品が多くなると、古いPCではページがフリーズしてしまうことも(>_<)

Chromeのデベロッパーツールで調査してみました。

Chrome デベロッパーツール でまずNetworkを確認し、サーバー側などで時間がかかっているわけではないのを確認します。(ここは省略)

Chromeの デベロッパーツール で メモリがどれぐらい使われているか確認します。

下記の画面の、一番左上の二重丸をクリックし、Heap Snapshotというのを取ります。

ででん!

遅いVueをChrome開発者ツールを使ってメモリを調査したところ
ん?配列がいっぱい…?

array というのが105万個もあります。( ゚Д゚) そして、これが約120Mもメモリを使っています。

なんだ…?こいつらッ

105万個という数にヤバさを感じますね!!

これ、クリックすると中身が見れるんですが、見るとあんまり関係ないのもあるので辛抱強く見ていくと、なんか見覚えのあるプロパティ名がずらっと出てたりもします。

で、いくつかのパターンでメモリを取得してみると、このarray というのが増えたり減ったりしていて(ある時は半分の50万個ぐらい)ページの中で繰り返し描画されているコンポーネントの関係があるのでは?と思われました。

で、Vueの$dataってリアクティブなので、こうやってメモリ上に確保されているのかなと思い当たり、繰り返しのあるComponentの$dataに大き目のオブジェクトがあったりしたので、それを使わないようにしてみたら、劇的に改善しました。

遅いVueをChrome開発者ツールを使ってメモリを改善したところ
arrayは175個に

arrayの数は 105万個 →175個になり、メモリも約135Kになりました!桁違いすぎる(笑)

array のすぐ上の、compiled codeというのも劇的に少なくなっています。

結果、ページ速度も改善し、動きがよくなりました!

Vueでメモリをいっぱい使っている、で検索すると、メモリリークの話ばっかり出てくるので、ここに書いておきます。

まれにこのChrome デベロッパーツール でメモリを測定する機能が壊れているというかなんというか、おかしくなる時があります。
そういう時は、Chromeを再起動してみましょう。

そんなにVue.jsに詳しいわけではないので、色々間違っていたらすみません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です