框架特定的构建优化

不同框架有特定的构建优化配置，针对性优化产物质量。

Vue 构建优化

JavaScript

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      isProduction: true,
      template: {
        compilerOptions: {
          // 生产环境优化
          hoistStatic: true,
          cacheStatic: true
        }
      }
    })
  ],
  build: {
    // Vue 特定优化
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

React 构建优化

JavaScript

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        // 生产环境 Babel 插件
        plugins: [
          'babel-plugin-transform-react-remove-prop-types'
        ]
      }
    })
  ],
  build: {
    // React 特定优化
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom', 'react-router-dom']
        }
      }
    }
  }
})

Svelte 构建优化

JavaScript

import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        // 生产优化
        dev: false,
        generate: 'dom',
        css: 'external'
      }
    })
  ]
})

框架分包策略

框架	分包建议
Vue	vue + vue-router + pinia
React	react + react-dom + router
Svelte	svelte + svelte-routing

注意：框架核心库单独分包，减少业务代码变更影响。

生产优化对比

配置	Vue	React	Svelte
模板静态提升	hoistStatic	-	-
移除 propTypes	-	babel plugin	-
外部 CSS	-	-	css: 'external'

构建分析插件

JavaScript

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

export default defineConfig({
  plugins: [
    vue(),
    react(),
    visualizer({
      open: true,
      filename: 'stats.html'
    })
  ]
})

要点总结

Vue 配置 hoistStatic 静态提升
React 移除 propTypes 减少体积
框架核心单独分包优化缓存
使用 visualizer 分析构建产物