第七章：性能优化

构建优化

代码分割

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus'],
          utils: ['lodash', 'axios']
        }
      }
    }
  }
})

压缩优化

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

Gzip 压缩

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip'
    })
  ]
})

加载优化

懒加载

// 路由懒加载
const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') }
]

预加载

<!-- index.html -->
<link rel="preload" href="/fonts/font.woff2" as="font" crossorigin>

分析工具

打包分析

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

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

小结

性能优化要点：

• 代码分割：manualChunks
• 压缩优化：terser、gzip
• 加载优化：懒加载、预加载
• 分析工具：visualizer

下一章我们将学习最佳实践。