feat: hoist static MDX content instead of creating vnodes

[ElMassimo]

Description 📖

This pull request adds a rehype plugin to detect static content in MDX documents and hoist it, optimizing the rendering performance of the component.

The output will be deoptimized correctly when using element shortcodes.

Background 📜

Any static elements will be serialized to HTML, and will be hoisted into a raw element (which uses createStaticVNode).

In most documents, this decreases the amount of vnodes dramatically.

The transformation is not slower, since converting the elements to jsx calls is slower or on par with stringifying to HTML.

Example

From posts/hello-2021.mdx.

Before

function _createMdxContent() {
  const _excerpt = [_jsx(_components.p, {
      children: "With a new year upon us, we also have a new blog! In this post, we would like to take a look back at some of the highlights from 2020, as well as some ideas we have for 2021."
  })];
  return _jsxs(_Fragment, {
      children: props.excerpt ? _excerpt : [..._excerpt, "\n", _jsx(_components.h2, {
          children: "Looking Back at 2020"
      }), "\n", _jsxs(_components.p, {
          children: ["2020 has been a challenging year, to say the least. Nonetheless, the team has made the best of a difficult situation. Despite an already massive user base, Vue's ", _jsx(_components.a, {
              href: "https://npm-stat.com/charts.html?package=vue&from=2020-01-01&to=2020-12-31",
              children: "NPM downloads"
          }), " and ", _jsx(_components.a, {
              href: "https://chrome-stats.com/d/nhdogjmejiglipccpnnnanhbledajbpd",
              children: "Devtools weekly active users"
          }), " both grew close to 50% throughout 2020. As time of this writing, Vue is being downloaded ~8M times per month on NPM and the devtools extension has ~1.5M weekly active users."]
      }), "\n", _jsx(_components.p, {
          children: "Aside from routine maintenance, there are some incredible things that we accomplished as a team:"
      }), "\n", _jsxs(_components.ul, {
          children: ["\n", _jsx(_components.li, {
              children: _jsx(_components.a, {
                  href: "https://github.com/vuejs/vue-next/releases/tag/v3.0.0",
                  children: "Shipped Vue 3 core"
              })
          }), "\n", _jsx(_components.li, {
              children: _jsx(_components.a, {
                  href: "https://v3.vuejs.org/",
                  children: "Brand new docs site for Vue 3"
              })
          }), "\n", _jsx(_components.li, {
              children: _jsx(_components.a, {
                  href: "https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0",
                  children: "Vue Router 4"
              })
          }), "\n", _jsx(_components.li, {
              children: _jsx(_components.a, {
                  href: "https://next.vuex.vuejs.org/",
                  children: "Vuex 4 (RC)"
              })
          }), "\n", _jsx(_components.li, {
              children: _jsx(_components.a, {
                  href: "https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg",
                  children: "Vue DevTools 6.0 with Vue 3 support (Beta)"
              })
          }), "\n", _jsx(_components.li, {
              children: _jsx(_components.a, {
                  href: "https://vue-test-utils.vuejs.org/v2/guide/introduction.html",
                  children: "Vue Test Utils 2 (Beta)"
              })
          }), "\n"]
      }), "\n", _jsx(_components.p, {
          children: "In addition to iterating on the existing ecosystem, we also invested in exploring improvements on new frontiers:"
      }), "\n", _jsxs(_components.ul, {
          children: ["\n", _jsxs(_components.li, {
              children: ["New Single File Component (SFC) feature proposals with the goal of leveraging the SFC compiler for more DX and performance wins:", "\n", _jsxs(_components.ul, {
                  children: ["\n", _jsx(_components.li, {
                      children: _jsx(_components.a, {
                          href: "https://github.com/vuejs/rfcs/pull/227",
                          children: _jsx(_components.code, {
                              children: "<script setup>"
                          })
                      })
                  }), "\n", _jsx(_components.li, {
                      children: _jsxs(_components.a, {
                          href: "https://github.com/vuejs/rfcs/pull/231",
                          children: ["CSS variables injection in ", _jsx(_components.code, {
                              children: "<style>"
                          })]
                      })
                  }), "\n"]
              }), "\n"]
          }), "\n", _jsxs(_components.li, {
              children: [_jsx(_components.a, {
                  href: "https://github.com/znck/vue-developer-experience",
                  children: "VueDX"
              }), " for providing better IDE integrations and development workflow"]
          }), "\n", _jsxs(_components.li, {
              children: [_jsx(_components.a, {
                  href: "http://vitejs.dev/",
                  children: "Vite"
              }), ", a new build tool built on top of modern standards"]
          }), "\n", _jsxs(_components.li, {
              children: [_jsx(_components.a, {
                  href: "https://vitepress.vuejs.org/",
                  children: "VitePress"
              }), ", a new static site generator built on Vue 3 and Vite"]
          }), "\n"]
      }), "\n", _jsx(_components.p, {
          children: "In addition to all of these exciting projects, it’s also been incredible to see the community continue to grow despite the challenges 2020 set forth in terms of being unable to facilitate in-person events. With initiatives such as remote conferences, meetups and other events, it’s been a joy to see the community interacting in new ways that might not have been possible otherwise."
      }), "\n", _jsx(_components.h2, {
          children: "Looking Forward to 2021"
      }), "\n", _jsx(_components.p, {
          children: "While Vue 3 beings many fundamental improvements and opens up avenues for future iterations, we are still in a transition period - both in terms of the library ecosystem and best practices involving new APIs. For early 2021, our focus will be further stabilizing the Vue 3 ecosystem, and continuing to help the community through this transition period. Here is a non-exhaustive list of things we’re looking forward to:"
      }), "\n", _jsxs(_components.ul, {
          children: ["\n", _jsx(_components.li, {
              children: "Stablize current RC/Beta sub projects"
          }), "\n", _jsx(_components.li, {
              children: "Finalize SFC proposals and further polish IDE support"
          }), "\n", _jsx(_components.li, {
              children: "Vue 3.1 (Q1, more details as we finalize the release plan)"
          }), "\n", _jsx(_components.li, {
              children: "Vue 2 → 3 Migration Tools (estimated end of Q1)"
          }), "\n", _jsx(_components.li, {
              children: "Vue CLI 5 w/ webpack 5 support (estimated Q1)"
          }), "\n", _jsx(_components.li, {
              children: "~~Vue 3 IE 11 Compatibility Build (estimated Q2)~~"
          }), "\n", _jsx(_components.li, {
              children: "Vue 2.7 (estimated Q2/3)"
          }), "\n", _jsx(_components.li, {
              children: "SSR support in Vite"
          }), "\n", _jsx(_components.li, {
              children: "Vuex 5 (TBD)"
          }), "\n"]
      }), "\n", _jsx(_components.p, {
          children: "In addition, we are excited about other frameworks and libraries in the ecosystem making progress towards Vue 3 support. And of course, we can’t wait to see what new ideas and tools you all have as we embark on a new chapter in the Vue.js roadmap."
      })]
  });
}

After

const _mdh_0 = _raw("<p>With a new year upon us, we also have a new blog! In this post, we would like to take a look back at some of the highlights from 2020, as well as some ideas we have for 2021.</p>", 1)
  , _mdh_1 = _raw("\n<h2>Looking Back at 2020</h2>\n<p>2020 has been a challenging year, to say the least. Nonetheless, the team has made the best of a difficult situation. Despite an already massive user base, Vue's <a href=\"https://npm-stat.com/charts.html?package=vue&#x26;from=2020-01-01&#x26;to=2020-12-31\">NPM downloads</a> and <a href=\"https://chrome-stats.com/d/nhdogjmejiglipccpnnnanhbledajbpd\">Devtools weekly active users</a> both grew close to 50% throughout 2020. As time of this writing, Vue is being downloaded ~8M times per month on NPM and the devtools extension has ~1.5M weekly active users.</p>\n<p>Aside from routine maintenance, there are some incredible things that we accomplished as a team:</p>\n<ul>\n<li><a href=\"https://github.com/vuejs/vue-next/releases/tag/v3.0.0\">Shipped Vue 3 core</a></li>\n<li><a href=\"https://v3.vuejs.org/\">Brand new docs site for Vue 3</a></li>\n<li><a href=\"https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0\">Vue Router 4</a></li>\n<li><a href=\"https://next.vuex.vuejs.org/\">Vuex 4 (RC)</a></li>\n<li><a href=\"https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg\">Vue DevTools 6.0 with Vue 3 support (Beta)</a></li>\n<li><a href=\"https://vue-test-utils.vuejs.org/v2/guide/introduction.html\">Vue Test Utils 2 (Beta)</a></li>\n</ul>\n<p>In addition to iterating on the existing ecosystem, we also invested in exploring improvements on new frontiers:</p>\n<ul>\n<li>New Single File Component (SFC) feature proposals with the goal of leveraging the SFC compiler for more DX and performance wins:\n<ul>\n<li><a href=\"https://github.com/vuejs/rfcs/pull/227\"><code>&#x3C;script setup></code></a></li>\n<li><a href=\"https://github.com/vuejs/rfcs/pull/231\">CSS variables injection in <code>&#x3C;style></code></a></li>\n</ul>\n</li>\n<li><a href=\"https://github.com/znck/vue-developer-experience\">VueDX</a> for providing better IDE integrations and development workflow</li>\n<li><a href=\"http://vitejs.dev/\">Vite</a>, a new build tool built on top of modern standards</li>\n<li><a href=\"https://vitepress.vuejs.org/\">VitePress</a>, a new static site generator built on Vue 3 and Vite</li>\n</ul>\n<p>In addition to all of these exciting projects, it’s also been incredible to see the community continue to grow despite the challenges 2020 set forth in terms of being unable to facilitate in-person events. With initiatives such as remote conferences, meetups and other events, it’s been a joy to see the community interacting in new ways that might not have been possible otherwise.</p>\n<h2>Looking Forward to 2021</h2>\n<p>While Vue 3 beings many fundamental improvements and opens up avenues for future iterations, we are still in a transition period - both in terms of the library ecosystem and best practices involving new APIs. For early 2021, our focus will be further stabilizing the Vue 3 ecosystem, and continuing to help the community through this transition period. Here is a non-exhaustive list of things we’re looking forward to:</p>\n<ul>\n<li>Stablize current RC/Beta sub projects</li>\n<li>Finalize SFC proposals and further polish IDE support</li>\n<li>Vue 3.1 (Q1, more details as we finalize the release plan)</li>\n<li>Vue 2 → 3 Migration Tools (estimated end of Q1)</li>\n<li>Vue CLI 5 w/ webpack 5 support (estimated Q1)</li>\n<li>~~Vue 3 IE 11 Compatibility Build (estimated Q2)~~</li>\n<li>Vue 2.7 (estimated Q2/3)</li>\n<li>SSR support in Vite</li>\n<li>Vuex 5 (TBD)</li>\n</ul>\n<p>In addition, we are excited about other frameworks and libraries in the ecosystem making progress towards Vue 3 support. And of course, we can’t wait to see what new ideas and tools you all have as we embark on a new chapter in the Vue.js roadmap.</p>", 22);

function _createMdxContent() {
  const _excerpt = [_mdh_0]
  return _jsxs(_Fragment, { children: props.excerpt ? _excerpt : [..._excerpt, _mdh_1] })
}

[nx-cloud[bot]]

☁️ Nx Cloud Report

We didn't find any information for the current pull request with the commit 67686ce63d3ca7dc2a1018885ff347199fddcfb9. You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	67686ce
Status:	✅  Deploy successful!
Preview URL:	https://f0ef5a7c.iles.pages.dev

View logs