Content Editor initial load is really slow because we are mounting too many Vue components

Summary

Rendering the Content Editor takes 600ms even when loading an empty document. I profiled the Content Editor Vue component using the Vue developer tools, and I found that if we remove a component like the code block bubble menu, the performance increases from 600ms to 200ms.

With code block bubble menu Without code block bubble menu
Screen_Shot_2022-07-28_at_12.13.53_PM Screen_Shot_2022-07-28_at_12.18.35_PM

I had noticed this problem before, however, this performance bug was noticed by a maintainer during a code review unrelated to this problem. Addressing this problem is important for two reasons:

  • The Content Editor is relatively isolated in the context of Wikis. This performance bug is more noticeable in the context of more complex features like issues and Merge Requests.
  • We will continue adding more Vue components to the Content Editor. We need to make sure that the Content Editor can scale to our future needs.

Steps to reproduce

You can open the Content Editor in Wikis and notice the delay.

Possible fixes

  • We should start by not rendering bubble menus unless they are active.
  • We should revisit other areas like the toolbar.