第4章 Vite模块化与插件系统(二）

4.3 常用插件介绍

4.3.1 官方插件

@vitejs/plugin-vue

用于支持 Vue.js 开发：

npm install @vitejs/plugin-vue --save-dev

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

@vitejs/plugin-react

用于支持 React 开发：

npm install @vitejs/plugin-react --save-dev

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

4.3.2 社区插件

vite-plugin-legacy

用于支持旧浏览器：

npm install @vitejs/plugin-legacy --save-dev

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

vite-plugin-compression

用于压缩输出的资源文件：

npm install vite-plugin-compression --save-dev

import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression()
  ]
})

4.3.3 插件组合

你可以将多个插件组合使用，以满足不同的需求：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    compression()
  ]
})

4.4 创建自定义插件

Vite 的插件系统允许开发者根据需求创建自定义插件。以下是一个详细的创建自定义插件的示例。

4.4.1 示例：日志插件

创建一个简单的日志插件，记录每个模块的加载时间。

4.4.1.1 实现插件

// vite-plugin-logger.js
export default function loggerPlugin() {
  return {
    name: 'logger-plugin',
    async load(id) {
      const start = Date.now()
      const result = await this.load(id)
      const end = Date.now()
      console.log(`Module ${id} loaded in ${end - start}ms`)
      return result
    }
  }
}

4.4.1.2 配置插件

import { defineConfig } from 'vite'
import loggerPlugin from './vite-plugin-logger'

export default defineConfig({
  plugins: [loggerPlugin()]
})

4.4.2 高级插件示例：SVG 图标插件

这个插件将 SVG 文件作为 Vue 组件导入。

4.4.2.1 实现插件

// vite-plugin-svg.js
import { createFilter } from 'vite'

export default function svgPlugin(options = {}) {
  const filter = createFilter(options.include || '**/*.svg', options.exclude)
  return {
    name: 'svg-plugin',
    transform(src, id) {
      if (!filter(id)) return
      return `export default { template: \`${src}\` }`
    }
  }
}

4.4.2.2 配置插件

import { defineConfig } from 'vite'
import svgPlugin from './vite-plugin-svg'

export default defineConfig({
  plugins: [svgPlugin()]
})

4.5 插件调试与优化

插件调试和优化是确保插件高效运行的关键。本节将介绍一些调试技巧和优化方法。

4.5.1 调试插件

4.5.1.1 使用 console.log

在插件中使用 console.log 打印调试信息。例如：

export default function loggerPlugin() {
  return {
    name: 'logger-plugin',
    async load(id) {
      console.log(`Loading module: ${id}`)
      const result = await this.load(id)
      console.log(`Module loaded: ${id}`)
      return result
    }
  }
}

4.5.1.2 使用断点调试

在插件代码中设置断点，然后在 Vite 启动时通过浏览器调试工具进行断点调试。

4.5.2 优化插件性能

4.5.2.1 减少不必要的计算

确保插件只对需要处理的文件进行操作。例如，使用 createFilter 函数创建文件过滤器：

import { createFilter } from 'vite'

export default function myPlugin() {
  const filter = createFilter('**/*.js', 'node_modules/**')
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!filter(id)) return
      // 插件逻辑
    }
  }
}

4.5.2.2 缓存计算结果

对于重复的计算结果，可以进行缓存以提高性能。例如：

const cache = new Map()

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (cache.has(id)) {
        return cache.get(id)
      }
      const result = /* 插件逻辑 */
      cache.set(id, result)
      return result
    }
  }
}