smaller runtime size

Vue.js, as a lightweight front-end framework, has always performed well in terms of runtime size. However, as project complexity increases, how to further optimize runtime size has become a focus for developers. From code splitting to on-demand importing, and compilation optimizations, there are many methods to reduce the runtime size of Vue.js applications.

Code Splitting and Lazy Loading

Code splitting is one of the most direct ways to reduce runtime size. Vue.js, combined with Webpack or Vite, can easily achieve route-level lazy loading. For example, dynamically importing components in Vue Router:

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

This approach ensures that the corresponding component code is loaded only when a specific route is accessed. Going further, large components can be split:

const HeavyComponent = () => import('./components/HeavyComponent.vue')

On-Demand Importing of Third-Party Libraries

Many third-party libraries support on-demand importing to avoid bundling the entire library. Take Element Plus as an example:

import { ElButton, ElInput } from 'element-plus'
// Instead of import ElementPlus from 'element-plus'

For utility libraries like lodash, you can use:

import debounce from 'lodash/debounce'
// Instead of import { debounce } from 'lodash'

Using Tree Shaking

Tree Shaking relies on the static analysis features of ES Modules. Ensure your project configuration supports it:

// vite.config.js
export default {
  build: {
    target: 'esnext' // Better Tree Shaking
  }
}

In package.json, set:

{
  "sideEffects": false
}

Component-Level Code Optimization

Optimizing individual components can also reduce size. Avoid complex expressions in templates:

<!-- Not recommended -->
<template>
  <div>{{ heavyComputation() }}</div>
</template>

<!-- Recommended -->
<template>
  <div>{{ computedValue }}</div>
</template>
<script>
export default {
  computed: {
    computedValue() {
      return this.heavyComputation()
    }
  }
}
</script>

Compilation Optimizations

Vue 3's compiler can perform more optimizations. Configure in Vite:

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'condense' // Compress whitespace
        }
      }
    })
  ]
}

Using Lighter Alternatives

In some cases, native APIs can replace libraries:

// Replace moment.js
const formatDate = (date) => new Date(date).toLocaleDateString()

// Replace axios
fetch('/api/data').then(res => res.json())

Static Resource Optimization

For SVG icons, use inline methods:

<template>
  <svg viewBox="0 0 24 24">
    <path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3L12 2z"/>
  </svg>
</template>

Build Configuration Optimization

Adjusting build configurations can significantly impact output size:

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
}

Runtime Feature Trimming

Vue 3 allows trimming unnecessary runtime features:

// vite.config.js
export default {
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.runtime.esm-bundler.js'
    }
  }
}

Server-Side Rendering Optimization

For SSR applications, distinguish between client and server builds:

// Server entry
import { createSSRApp } from 'vue'

export function createApp() {
  return createSSRApp(App)
}

Long-Term Caching Strategy

Use filename hashing for long-term caching:

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `[name].[hash].js`,
        assetFileNames: `[name].[hash].[ext]`
      }
    }
  }
}

Monitoring and Analysis

Use analysis tools to continuously monitor size changes:

// package.json
{
  "scripts": {
    "analyze": "vite build --mode analyze"
  }
}

With plugins:

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [visualizer()]
}