插件条件应用

Vite 插件可通过 apply 选项控制生效阶段，避免不必要的插件执行。

apply 选项

function myPlugin() {
  return {
    name: 'my-plugin',
    apply: 'build',  // 只在构建时生效
    // 或 'serve' 只在开发时生效
  }
}

函数形式 apply

function myPlugin() {
  return {
    name: 'my-plugin',
    apply({ command, mode }) {
      // command: 'serve' | 'build'
      // mode: 'development' | 'production' | ...
      return command === 'build' && mode === 'production'
    }
  }
}

开发阶段插件示例

// 只在开发环境生效的插件
function devPlugin() {
  return {
    name: 'dev-plugin',
    apply: 'serve',
    configureServer(server) {
      // 开发服务器配置
    }
  }
}

构建阶段插件示例

// 只在构建时生效的插件
function buildPlugin() {
  return {
    name: 'build-plugin',
    apply: 'build',
    generateBundle(options, bundle) {
      // 构建产物处理
    }
  }
}

注意：apply 未设置时插件在所有阶段生效。

条件配置插件

import compression from 'vite-plugin-compression'

export default defineConfig(({ command }) => ({
  plugins: [
    // 只在生产构建时压缩
    command === 'build' && compression()
  ].filter(Boolean)
}))

插件执行控制对比

要点总结

• apply 控制插件生效阶段
• serve 只在开发环境生效
• build 只在构建环境生效
• 函数形式可更细粒度控制