JSX in Vue components - Performance & Optimization

Performance: JSX in Vue components

MEDIUM IMPACT

Using JSX in Vue components affects the rendering speed and bundle size due to how templates are compiled and how the virtual DOM updates.

Rendering UI in Vue components

Vue

import { defineComponent } from 'vue'
export default defineComponent({
  render() {
    return <div>{this.title} {this.subtitle}</div>
  }
})

JSX syntax compiles to efficient render functions with better readability and easier optimization by Vue compiler.

📈 Performance Gainreduces manual code, enables compiler optimizations, slightly smaller bundle than manual h() calls

Rendering UI in Vue components

Vue

export default {
  render() {
    return h('div', this.title + ' ' + this.subtitle)
  }
}

Using manual render functions with h() can be verbose and error-prone, causing slower development and potential runtime overhead.

📉 Performance Costadds ~2-5kb to bundle due to runtime helpers, triggers multiple virtual DOM patches if not optimized

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual render function with h()	Moderate	Multiple per update	Medium	[!] OK
JSX in Vue components	Moderate	Few to moderate	Medium	[OK] Good
Vue SFC templates	Minimal	Minimal	Low	[OK] Good

Rendering Pipeline

JSX in Vue components is compiled to render functions that create virtual DOM nodes. These nodes are diffed and patched to the real DOM during updates.

→Compile

→Virtual DOM Diffing

→DOM Update

→Paint

⚠️ BottleneckVirtual DOM Diffing and DOM Update stages can be heavier if JSX produces complex or deeply nested structures.

Core Web Vital Affected

LCP

Using JSX in Vue components affects the rendering speed and bundle size due to how templates are compiled and how the virtual DOM updates.

Optimization Tips

1JSX adds bundle size and build complexity compared to Vue templates.

2JSX compiles to render functions that create virtual DOM nodes for Vue.

3Keep JSX simple and leverage Vue reactivity to optimize rendering.

Performance Quiz - 3 Questions

What is a main performance downside of using JSX in Vue components compared to Vue SFC templates?

A JSX increases bundle size and build complexity

B JSX causes more layout shifts (CLS)

C JSX disables Vue's reactivity system

D JSX prevents server-side rendering

DevTools: Performance

How to check: Record a performance profile while loading and interacting with the Vue app using JSX. Look for scripting and rendering times.

What to look for: Check for longer scripting times or multiple layout recalculations indicating inefficient JSX rendering or excessive DOM updates.