Global properties and methods in Vue - Performance & Optimization

Performance: Global properties and methods

MEDIUM IMPACT

Global properties and methods affect initial app load and runtime performance by adding shared reactive or non-reactive data accessible across components.

Sharing utility functions or data across many Vue components

Vue

import { heavyFunction } from './utils';
// Use heavyFunction only where needed inside components

Imports keep code split and only load functions when components use them, reducing global overhead.

📈 Performance Gainreduces bundle size by 50kb+, lowers memory use, improves interaction speed

Sharing utility functions or data across many Vue components

Vue

app.config.globalProperties.$utils = { heavyFunction: () => { /* large code */ } }

Attaching large or complex objects to globalProperties increases bundle size and runtime memory usage, slowing interaction responsiveness.

📉 Performance Costadds 50kb+ to bundle, increases memory usage, may block rendering for 20ms+

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large globalProperties object	0 (no DOM changes)	0	0	[!] OK but costly in JS execution and memory
Scoped imports in components	0	0	0	[OK] Minimal JS overhead, better load performance

Rendering Pipeline

Global properties are set during app initialization and accessed during component render and updates. They affect JavaScript execution and reactive dependency tracking.

→JavaScript Execution

→Reactive Dependency Tracking

→Component Render

⚠️ BottleneckJavaScript Execution when large global objects are created or accessed frequently

Core Web Vital Affected

INP

Global properties and methods affect initial app load and runtime performance by adding shared reactive or non-reactive data accessible across components.

Optimization Tips

1Avoid adding large objects or heavy functions to globalProperties.

2Import utilities in components instead of using globalProperties when possible.

3Limit globalProperties to small, essential shared data to reduce runtime overhead.

Performance Quiz - 3 Questions

What is a performance risk of adding large objects to Vue's globalProperties?

A Improves Largest Contentful Paint (LCP)

B Increases bundle size and runtime memory usage

C Causes more DOM reflows

D Reduces JavaScript execution time

DevTools: Performance

How to check: Record a performance profile during app startup and interaction; look for long scripting tasks related to globalProperties initialization or usage.

What to look for: Long scripting blocks or high memory usage indicating heavy global properties slowing interaction responsiveness