vue.js+bootstrapvueで大きいデータを扱う場合の注意事項

1.実際に起こったこと

vue.js+bootstrapvueでAPIで、サーバから1万レコード規模のjsonデータを読み込むとメモリを想像以上に喰います。

どのくらいメモリを使われるかというと、APIで取得時のjsonデータは2mb程度でしたが、vue.jsに読み込むとメモリが200mb程度に急増します。

2.なぜなのか？

いろいろ調べてみると以下のサイトに書かれてる通り、vue.jsはリアクティブにデータ操作できるようにdataに変数をセットする際に、色々情報が付与されます。これによってデータが急増します。

https://github.com/vuejs/vue/issues/4384
https://vuedose.tips/tips/improve-performance-on-large-lists-in-vue-js/

3.対策

対策はdataにデータを保存する前に、Object.freeze()してObjectを変更できなくするこ！

簡単ですが効果はバツグンでした。これだけでメモリ使用量は急増しなくなりました。

4.まとめ

vue.jsで大きいデータを扱う場合は、Object.freeze()をつかう！