Build Optimization

16.3.1. Chunk Splitting Strategy

Large dependencies must be separated into distinct chunks to improve cache efficiency.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia'],
        ui: ['@vueuse/core'],
      },
    },
  },
},

• Core framework libraries (vue, vue-router, pinia) must be separated into a vendor chunk.
• Large libraries that change infrequently should be separated into their own chunks.
• Route-based code splitting should leverage Vue Router's dynamic imports.

---

16.3.2. Build Analysis

rollup-plugin-visualizer must be used to analyze bundle sizes.

yarn add -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
  ],
})

---

16.3.3. Build Verification Criteria

The following items must be verified after a production build.

Item	Criteria
Initial load JS size	300KB or less (gzipped)
Maximum single chunk size	500KB or less
Build warnings	0
Source maps	Disabled in production

---

16.3.4. Tree Shaking

• When importing from libraries, only the required features must be individually imported.
• The import * as syntax must not be used, as it prevents tree shaking.

// Correct — Individual imports
import { ref, computed, watch } from 'vue'

// Incorrect — Wildcard import
import * as Vue from 'vue'