插件执行顺序控制

插件执行顺序控制

Vite.js 的插件系统基于 Rollup 的插件机制，插件执行顺序直接影响构建结果。理解并控制插件执行顺序是优化构建流程的关键。插件顺序问题通常出现在需要多个插件协同工作时，比如一个插件转换代码后另一个插件需要处理结果。

插件执行顺序基础

Vite 插件执行分为两个阶段：resolveId、load、transform 等钩子属于构建阶段，buildStart、buildEnd 等属于输出阶段。默认情况下，插件按照数组顺序执行：

// vite.config.js
export default {
  plugins: [
    pluginA(), // 先执行
    pluginB()  // 后执行
  ]
}

但某些钩子支持sequential（顺序执行）、parallel（并行执行）或first（提前终止）等模式。例如transform钩子默认是sequential，而resolveId是first。

控制执行顺序的方法

1. 显式排序

通过enforce属性强制调整位置：

// vite.config.js
export default {
  plugins: [
    {
      ...pluginA(),
      enforce: 'pre' // 前置执行
    },
    pluginB(), // 正常顺序
    {
      ...pluginC(),
      enforce: 'post' // 后置执行
    }
  ]
}

enforce可选值：

• pre：在核心插件前执行
• default：正常顺序
• post：在核心插件后执行

2. 钩子优先级

某些钩子可以通过返回null显式传递控制权：

function myPlugin() {
  return {
    name: 'my-plugin',
    resolveId(source) {
      if (source.startsWith('@/')) return null // 交给后续插件处理
      return source
    }
  }
}

3. 条件执行

利用apply属性控制插件生效时机：

// vite.config.js
export default {
  plugins: [
    {
      ...pluginA(),
      apply: 'build' // 仅在build时执行
    }
  ]
}

实际场景示例

CSS 预处理场景

假设需要先执行 Sass 编译再添加浏览器前缀：

import sass from 'sass'
import autoprefixer from 'autoprefixer'

export default {
  plugins: [
    {
      name: 'vite-sass-preprocessor',
      transform(code, id) {
        if (id.endsWith('.scss')) {
          return sass.compileString(code).css
        }
      },
      enforce: 'pre'
    },
    {
      name: 'vite-autoprefixer',
      transform(code, id) {
        if (id.endsWith('.css')) {
          return autoprefixer.process(code).css
        }
      }
    }
  ]
}

多插件协作示例

处理 Vue SFC 时典型顺序：

export default {
  plugins: [
    vue(), // 先解析 Vue 单文件组件
    {
      ...imageOptimizer(),
      enforce: 'post' // 最后优化图片
    }
  ]
}

调试插件顺序

使用--debug参数查看插件执行情况：

vite build --debug

输出会显示各插件钩子的执行顺序和时间消耗，这对优化插件顺序非常有帮助。

高级控制技巧

1. 手动触发钩子

function myPlugin() {
  return {
    name: 'manual-hook',
    buildStart() {
      this.emitFile({
        type: 'chunk',
        id: 'virtual-module',
        name: 'virtual-module'
      })
    }
  }
}

2. 动态调整顺序

export default {
  plugins: [
    {
      name: 'dynamic-order',
      config(config) {
        if (config.mode === 'development') {
          return {
            plugins: [devPlugin()]
          }
        }
      }
    }
  ]
}

3. 钩子拦截

function interceptorPlugin() {
  return {
    name: 'hook-interceptor',
    transform(code, id) {
      if (id.includes('intercept')) {
        return code.replace('foo', 'bar')
      }
    }
  }
}

常见问题解决方案

插件冲突处理

当两个插件都处理同一类文件时：

export default {
  plugins: [
    {
      ...markdownPlugin(),
      enforce: 'pre',
      apply: 'serve' // 仅在开发时处理 markdown
    },
    {
      ...anotherMarkdownPlugin(),
      enforce: 'post'
    }
  ]
}

性能优化顺序

将耗时插件放在最后：

export default {
  plugins: [
    basicTransforms(),
    {
      ...expensivePlugin(),
      enforce: 'post'
    }
  ]
}

插件顺序与构建模式

开发模式和生产模式可能需要不同顺序：

export default {
  plugins: [
    mode === 'production' ? productionPlugin() : null,
    devOnlyPlugin()
  ].filter(Boolean)
}

插件元数据交换

通过meta属性传递信息：

function firstPlugin() {
  return {
    name: 'first',
    transform(code) {
      this.meta.myData = 'processed'
    }
  }
}

function secondPlugin() {
  return {
    name: 'second',
    transform(code) {
      console.log(this.meta.myData) // 获取上游插件数据
    }
  }
}

虚拟模块处理顺序

处理虚拟模块时需要特别注意：

function virtualModulePlugin() {
  const virtualId = 'virtual:module'
  return {
    name: 'virtual-module',
    resolveId(id) {
      if (id === virtualId) return virtualId
    },
    load(id) {
      if (id === virtualId) return 'export default "content"'
    }
  }
}

这类插件通常需要enforce: 'pre'确保优先执行。