Component registration (global vs local) in Vue - Performance Comparison

Performance: Component registration (global vs local)

MEDIUM IMPACT

This affects initial page load speed and runtime rendering performance by controlling how many components are loaded and parsed upfront versus on demand.

Using components in a Vue app

Vue

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// Register locally inside component that uses it (e.g. in App.vue):
// import MyButton from './MyButton.vue'
// export default {
//   components: { MyButton }
// }

app.mount('#app');

Local registration loads components only when needed, reducing initial bundle size and speeding up first paint.

📈 Performance GainSaves 100-300ms on LCP by reducing initial bundle size and parsing time

Using components in a Vue app

Vue

import { createApp } from 'vue';
import MyButton from './MyButton.vue';
import App from './App.vue';

const app = createApp(App);
app.component('MyButton', MyButton); // global registration
app.mount('#app');

Global registration loads all components upfront, increasing bundle size and delaying initial render.

📉 Performance CostAdds extra KBs to initial bundle, increasing LCP by 100-300ms depending on component size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Global registration	All components parsed upfront	Multiple reflows if many components render	Higher paint cost due to larger DOM	[X] Bad
Local registration	Only used components parsed	Fewer reflows as fewer components render initially	Lower paint cost with smaller DOM	[OK] Good

Rendering Pipeline

Global registration adds components to the app instance before mounting, increasing initial JavaScript parsing and bundle size. Local registration scopes components to where they are used, allowing tree shaking and smaller bundles. This reduces the time spent in script evaluation and layout calculation during initial render.

→JavaScript Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Parsing and Initial Layout

Core Web Vital Affected

LCP

This affects initial page load speed and runtime rendering performance by controlling how many components are loaded and parsed upfront versus on demand.

Optimization Tips

1Avoid global registration for many components to keep initial bundle small.

2Use local registration to load components only when needed.

3Combine local registration with lazy loading for best load performance.

Performance Quiz - 3 Questions

What is a main performance downside of globally registering many Vue components?

A Causes more CSS recalculations

B Increases initial bundle size and delays first paint

C Prevents lazy loading of images

D Blocks user input events

DevTools: Performance

How to check: Record page load and look at scripting and rendering times. Check bundle size in Network panel.

What to look for: Long scripting times and large JS bundles indicate global registration impact; faster scripting and smaller bundles indicate local registration.