Full-process performance optimization for SPA applications

Understanding SPA Performance Bottlenecks

The core performance issues of Single-Page Applications (SPAs) typically revolve around three aspects: initial load speed, runtime responsiveness, and resource management. During the initial load, the large volume of bundled JavaScript files directly leads to prolonged white screen time. For example, an unoptimized React project's main bundle may exceed 2MB:

// Webpack configuration example
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

Runtime performance issues often arise from frequent DOM operations and state updates. In Vue applications, improper use of v-for can lead to unnecessary rendering:

<!-- Anti-pattern: List rendering without keys -->
<div v-for="item in items">
  {{ item.text }}
</div>

Optimization During the Build Phase

Code splitting is an effective way to reduce the initial load volume. Webpack's dynamic import syntax can separate modules into different chunks:

// Dynamically import components
const ProductList = () => import('./components/ProductList.vue');

Tree Shaking removes unused code through static analysis. Ensure "sideEffects": false is set in package.json and configure Babel to preserve ES modules:

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }]
  ]
};

Use modern compression algorithms like Brotli for resource optimization:

// vite.config.js
export default {
  build: {
    brotliSize: true,
  }
}

Runtime Performance Improvements

Virtual scrolling addresses long-list rendering issues. Example using react-window in React:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List height={600} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

Debounce and throttle high-frequency events, such as search input:

// Debounce implementation with Lodash
import { debounce } from 'lodash';

const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

Cache Strategy Design

Implement offline caching with Service Worker:

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.css'
      ]);
    })
  );
});

Best practices for HTTP cache headers:

# Nginx configuration
location /static {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

Monitoring and Continuous Optimization

Measure key metrics using the Performance API:

// Measure FP time
const perfObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('FP:', entry.startTime);
  }
});
perfObserver.observe({ type: 'paint', buffered: true });

Custom metric reporting:

// Component mount time tracking
export default {
  mounted() {
    this.$perfStart = performance.now();
  },
  beforeDestroy() {
    const duration = performance.now() - this.$perfStart;
    trackComponentLifecycle('ProductDetail', duration);
  }
}

Framework-Specific Optimization Techniques

React component optimization example:

// Use React.memo to avoid unnecessary renders
const MemoizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

// Use useMemo to cache calculation results
const computedValue = useMemo(() => expensiveCalculation(input), [input]);

Vue's static node marking:

<template>
  <div>
    <!-- Mark static content -->
    <div v-once>Copyright {{ year }}</div>
    <!-- Dynamic content -->
    <div>{{ dynamicContent }}</div>
  </div>
</template>

Network Layer Optimization Practices

Preload critical resources:

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">

HTTP/2 server push configuration:

# Apache configuration
<FilesMatch "bundle\.js$">
  Header set Link "</bundle.js>; rel=preload; as=script"
</FilesMatch>

Memory Management Strategies

Common patterns to avoid memory leaks:

// Clean up event listeners
useEffect(() => {
  const handleResize = () => {/*...*/};
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// Timer cleanup
useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

Rendering Performance Tuning

CSS containment for rendering optimization:

.product-list {
  contain: strict;
}

Proper way to force GPU acceleration:

.animation-layer {
  will-change: transform;
  transform: translateZ(0);
}

Mobile-Specific Optimizations

Optimize touch event handling:

// Disable double-tap zoom
document.addEventListener('dblclick', (e) => {
  e.preventDefault();
}, { passive: false });

// Use touch-action to control default behavior
element.style.touchAction = 'pan-y';

Fallback solutions for slow networks:

// Detect network status
const connection = navigator.connection || navigator.mozConnection;
if (connection.effectiveType === '2g') {
  loadLiteVersion();
}