How to Improve Performance of Vuex Store
I started working with my first Vue application couple of months ago. Codebase was pretty established and I had no prior experience of Vue or vuex before that. I had experience with React and redux so world of Vue was new to me. Application that I was working with is an online platform which has ecommerce-like features and a chat that uses Socket connection through vue-socket.io library.
After working on the project for a while, I noticed that if the site is open for 10–15 minutes, it starts to eat CPU. Like a lot. After refreshing page, everything is fine for another 15 minutes. Then my Macbook’s fan goes through the roof again.
What is going on? 🤔
To find out what the problem was, I let the site idle for 15 minutes and opened Chrome’s Performance tools to record some footage. The reason for slowness was pretty clear: adding new chat messages to the store could take forever.
There were calls to some mystery _traverse function that was recursive. Reason to this was found from Vue source code. That _traverse collects all objects as deep dependency, so that if some Object changes, it can notify the correct getters.
Solution 🙏
It was pretty simple how to avoid the slow recursive collection: just freeze everything. Since our messages are never edited, freezing stuff is fast fix and won’t cause any side effects.
Before the fix, adding new messages looked like this:
SOCKET_msg(state, payload) {
state.messages.push(payload);
if (state.messages.length > 100) {
state.messages = state.messages.slice(-100);
}
},To fix the the issue, I just froze all messages that were saved. That way vuex wont collect them as deep dependency.
SOCKET_msg(state, payload) {
const message = { ...payload };
// Freeze message to prevent slow '_traverse' calls made by Vue
Object.freeze(message); state.messages.push(message); if (state.messages.length > 100) {
state.messages = state.messages.slice(-100);
}
},
If user could edit their messages after sending, we would have to copy the original message to new Object, apply updates there and save it to store with Vue.set. Otherwise it wouldn’t update correctly on the UI.
Now the site can idle open for ages without eating all the CPU. Yay! 🤗
Next? 🤓
If you have other tips to improve Vue performance, leave a comment! 📩
I’m a technology enthusiast and software developer with passion to pixel perfect design. I really love building new things, especially when it involves technology.
If you liked this post, follow us to receive the latest trends in tech & design 🤓
