Vue.js dev tools to optimize site

Ask us anything
1

:wave: hello, we’re trying to use Vue.js devtools chrome extension to optimize our site since we’re seeing load issues and page auto-refreshing on mobile. https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

unfortunately, we’re seeing the below message when attempting to use the tool while on our site. Is this a configuration within the released app that causes this? In the meantime, we keep checking our local configurations. Appreciate any insight

image

2

quick update for anyone else looking to optimize in the future…

  • we’ve used a combination of Chrome Developer Tools, especially the performance and network tabs
  • also used Browserstack to tail logs on mobile devices

the network tab helped us identify elements that were being loaded even when they were not needed (still trying to track down two pesky remaining ones!). the performance tab allowed us to record a mobile session and helped us quickly identify that the animations (on modal launch/close) were most certainly adding to our troubles.

for now, :crossed_fingers: that we’ve optimized enough for the time being. hope its helpful for others!

2 Likes
3

Awesome! Thanks for taking the time to share this with the rest of the community, really appreciate it :slightly_smiling_face:

1 Like
4

@aurelie What about allowing to toggle OFF production mode on the published app, for debugging purpose ? :thinking:

1 Like
5

I am not sure this is a good practise. We have to think about having a dedicated env for this

1 Like
6

We’ve been testing further and have identified some things I wanted to share – hoping others might have some ideas, especially WW team experts :slight_smile:

  • navigating between pages in our application results in the JS heap size continually growing
  • refreshing an already loaded page resets the JS heap size down to lowest ‘base’ level
  • one of our most intensive pages uses a variable to show/hide a modal which presents data; this data is set within an object onClick; even though the object value is reset on close, opening/closing modal also results in JS heap size growing
  • we’ve also noticed that the DOM Nodes and JS event listeners count appears to increase each time the same modal is re-opened. is this expected/normal behavior, or curious if this might be adding to our troubles.

we’ve confirmed none of our collections are set to auto-retrieve. since we’ve confirmed the JS heap size continually grows, it seems this is the first item we need to address. are we thinking about it the wrong way?

1 Like
7

Good news to share, we’ve solved what we believe is the root of our issue.

As we were building various interfaces within our modal, we were being lazy by copying/pasting the existing modal files. As a result, without realizing/focusing on it, our modal was super bloated.

Original layout:

image
image262×583 7.62 KB

Streamlined layout:

image

Also, instead of binding our variable to Display property, we updated to use Condition property.

Last, we consolidated duplicative divs by implementing more javascript conditionals to dynamically adjust content.

To summarize,

  • main modal content div is the same and shows when your variable to show modal is true
  • dynamic modal content is set to show/hide using Condition property and shows within a single modal content div
  • used javascript to further automate showing/hiding dynamic content to eliminate duplicative divs

thanks for your previous comments on the ticket @Joyce @Alexis @aurelie

1 Like