Generic components in Vue - Performance & Optimization

Performance: Generic components

MEDIUM IMPACT

Generic components affect rendering speed and bundle size by reusing code and reducing code duplication.

Reusing UI elements with similar structure but different data

Vue

<template>
  <div>
    <Card v-for="item in items" :key="item.id" :title="item.title" :content="item.content" />
  </div>
</template>
<script setup>
import Card from './Card.vue'
const items = [
  { id: 1, title: 'Title A', content: 'Content A' },
  { id: 2, title: 'Title B', content: 'Content B' },
  { id: 3, title: 'Title C', content: 'Content C' }
]
</script>

<!-- Card.vue -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>
<script setup>
const props = defineProps(['title', 'content'])
</script>

Using a generic Card component reduces repeated HTML, lowers bundle size, and centralizes code for better caching and smaller bundle size.

📈 Performance GainSingle reflow for list rendering, smaller bundle size by reusing component code

Reusing UI elements with similar structure but different data

Vue

<template>
  <div>
    <div class="card">
      <h2>{{ title1 }}</h2>
      <p>{{ content1 }}</p>
    </div>
    <div class="card">
      <h2>{{ title2 }}</h2>
      <p>{{ content2 }}</p>
    </div>
    <div class="card">
      <h2>{{ title3 }}</h2>
      <p>{{ content3 }}</p>
    </div>
  </div>
</template>
<script setup>
const title1 = 'Title A'
const content1 = 'Content A'
const title2 = 'Title B'
const content2 = 'Content B'
const title3 = 'Title C'
const content3 = 'Content C'
</script>

Repeating similar HTML structure multiple times increases code duplication, causing slower rendering and larger bundle size.

📉 Performance CostTriggers multiple reflows for each repeated element, increases bundle size by duplicating code

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated HTML blocks	High (due to code duplication)	Multiple reflows per block	High paint cost due to many elements	[X] Bad
Generic component with props	Low (single component reused)	Single reflow for list	Lower paint cost due to fewer nodes	[OK] Good

Rendering Pipeline

Generic components reduce code duplication and CSS recalculations by reusing the same component structure with different data. This optimizes layout and paint steps.

→DOM Construction

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to repeated similar elements

Core Web Vital Affected

LCP

Generic components affect rendering speed and bundle size by reusing code and reducing code duplication.

Optimization Tips

1Reuse UI elements with generic components to reduce bundle size.

2Pass data via props to avoid duplicating component code.

3Code reuse reduces bundle size, improving LCP.

Performance Quiz - 3 Questions

How does using generic components affect the bundle size compared to repeating HTML blocks?

A It reduces bundle size by reusing the same component structure

B It increases bundle size because components add overhead

C It has no effect on bundle size

D It duplicates code for each use

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with the list. Look for layout and paint events related to repeated elements.

What to look for: High number of layout recalculations and paint events indicates repeated DOM nodes. Lower counts indicate efficient generic component usage.