Vite 进阶配置：插件开发、按需加载与生产环境优化

// vite-plugin-banner.ts
import type { Plugin } from 'vite'
export default function bannerPlugin(text = 'Built with Vite'): Plugin {
  return {
    name: 'vite-plugin-banner',
    apply: 'build',
    generateBundle(_, bundle) {
      for (const f of Object.values(bundle)) {
        if (f.type === 'chunk') f.code = `/* ${text} */\n` + f.code
      }
    }
  }
}

// vite-plugin-virtual.ts
import type { Plugin } from 'vite'
const ID = 'virtual:env'
export default function virtualEnvPlugin(): Plugin {
  return {
    name: 'vite-plugin-virtual-env',
    resolveId(id) { return id === ID ? id : null },
    load(id) { if (id === ID) return `export const mode = '${process.env.NODE_ENV}'` },
    handleHotUpdate(ctx) {
      if (ctx.file.includes('.env')) ctx.server.ws.send({ type: 'full-reload' })
    }
  }
}

// vite-plugin-preload.ts
import type { Plugin } from 'vite'
export function preloadPlugin(): Plugin {
  return {
    name: 'vite-plugin-preload',
    transformIndexHtml(html) {
      const hint = `<link rel="preconnect" href="https://cdn.example.com">`
      return html.replace('</head>', `${hint}</head>`)
    }
  }
}

// vite-plugin-middleware.ts
import type { Plugin } from 'vite'
export function middlewarePlugin(): Plugin {
  return {
    name: 'vite-plugin-middleware',
    apply: 'serve',
    configureServer(server) {
      server.middlewares.use('/health', (_req, res) => { res.statusCode = 200; res.end('ok') })
    }
  }
}

// vue-router
const routes = [ { path: '/', component: () => import('@/pages/Home.vue') } ]

const pages = import.meta.glob('/src/pages/**/*.vue', { eager: false })

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default { plugins: [
  AutoImport({ imports: ['vue','vue-router','pinia'] }),
  Components({ resolvers: [ElementPlusResolver()] })
] }

// vite.config.ts（Rollup 配置）
import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    sourcemap: true,
    chunkSizeWarningLimit: 800,
    rollupOptions: {
      output: {
        manualChunks: {
          framework: ['vue','vue-router','pinia'],
          ui: ['element-plus'],
          chart: ['echarts']
        }
      }
    }
  }
})

export default defineConfig({
  optimizeDeps: { include: ['lodash-es','dayjs'], exclude: ['big-lib'] }
})

export default defineConfig({
  base: 'https://cdn.example.com/',
  build: { assetsInlineLimit: 8 * 1024 }
})

import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({ build: { rollupOptions: { plugins: [visualizer({ filename: 'stats.html' })] } } })

import Inspect from 'vite-plugin-inspect'
export default defineConfig({ plugins: [Inspect()] })

export default defineConfig({
  server: {
    proxy: {
      '/api': { target: 'https://api.example.com', changeOrigin: true, rewrite: p => p.replace(/^\/api/, '') }
    }
  }
})

import type { Plugin } from 'vite'
export function rewritePlugin(): Plugin {
  return {
    name: 'vite-plugin-rewrite',
    enforce: 'pre',
    transform(code, id) {
      if (id.endsWith('.ts') || id.endsWith('.js')) return code.replace(/@\//g, '/src/')
    }
  }
}

import { defineConfig } from 'vite'
export default defineConfig({
  optimizeDeps: {
    entries: ['src/main.ts'],
    include: ['lodash-es','dayjs'],
    esbuildOptions: { target: 'es2017' }
  }
})

export default defineConfig({ build: { modulePreload: { polyfill: true } } })

CI=true vite build --mode production --profile

export default defineConfig({ server: { fs: { strict: true }, hmr: { overlay: true } } })