Axios setup and configuration in Vue - Performance & Optimization

Performance: Axios setup and configuration

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how HTTP requests are made and managed in the app.

Making HTTP requests in a Vue app

Vue

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

export default {
  data() {
    return { data: null };
  },
  methods: {
    async fetchData() {
      const response = await apiClient.get('/data');
      this.data = response.data;
    }
  }
}

Using a single configured Axios instance reduces repeated setup and allows centralized control of requests.

📈 Performance GainSaves bundle size and reduces network setup overhead improving interaction responsiveness

Making HTTP requests in a Vue app

Vue

import axios from 'axios';

export default {
  data() {
    return { data: null };
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          this.data = response.data;
        });
    }
  }
}

Creating a new Axios instance or importing axios directly everywhere causes repeated setup and larger bundle size.

📉 Performance CostAdds unnecessary bundle size and can cause repeated network setup overhead

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct axios calls everywhere	Minimal	0	0	[!] OK
Single configured axios instance	Minimal	0	0	[OK] Good

Rendering Pipeline

Axios setup affects the network request phase before rendering. Efficient setup avoids blocking UI updates waiting for data.

→Network

→JavaScript Execution

→Rendering

⚠️ BottleneckNetwork latency and blocking JavaScript execution during request handling

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how HTTP requests are made and managed in the app.

Optimization Tips

1Use a single Axios instance to avoid repeated setup overhead.

2Configure timeouts to prevent hanging requests blocking UI.

3Centralize request configuration to reduce bundle size and improve maintainability.

Performance Quiz - 3 Questions

What is a performance benefit of using a single Axios instance in a Vue app?

A Blocks rendering until all requests finish

B Reduces repeated setup and network overhead

C Increases bundle size by duplicating code

D Automatically caches all responses

DevTools: Network

How to check: Open DevTools, go to Network tab, filter XHR requests, and observe request timing and size.

What to look for: Look for repeated or slow requests and large payloads that delay interaction responsiveness.