Các plugin thiết yếu giúp mở rộng khả năng của Vite, từ hỗ trợ framework đến tối ưu hiệu suất. Dưới đây là hướng dẫn chi tiết cách cài đặt và tích hợp từng plugin.

Bảng tổng quan plugin thông dụng

Cấu hình chi tiết từng plugin

1. Hỗ trợ Vue 3 với @vitejs/plugin-vue

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

export default defineConfig({
  plugins: [
    vuePlugin({
      script: {
        defineModel: true
      },
      template: {
        compilerOptions: {
          isCustomElement: tag => /^custom-/.test(tag)
        }
      }
    })
  ]
})

2. Hỗ trợ React với @vitejs/plugin-react

import { defineConfig } from 'vite'
import reactPlugin from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    reactPlugin({
      include: /\.(jsx|tsx)$/,
      babel: {
        plugins: ['@babel/plugin-proposal-class-properties']
      }
    })
  ]
})

3. Quản lý icon SVG với vite-plugin-svg-icons

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [resolve(__dirname, 'src/icons')],
      symbolId: 'svg-[name]',
      inject: 'body-last'
    })
  ]
})

Sử dụng trong component:

<svg>
  <use href="#svg-home" />
</svg>

4. Nén tài nguyên với vite-plugin-compression

import { defineConfig } from 'vite'
import compress from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compress({
      algorithm: 'gzip',
      threshold: 8192,
      ext: '.gz'
    }),
    compress({
      algorithm: 'brotliCompress',
      ext: '.br'
    })
  ]
})

5. Tự động import với unplugin-auto-import

import { defineConfig } from 'vite'
import autoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    autoImport({
      imports: ['vue', 'vue-router'],
      dirs: ['src/hooks/*'],
      dts: './types/auto-imports.d.ts'
    })
  ]
})

Giờ có thể dùng trực tiếp mà không cần import:

const state = ref(0)
const route = useRoute()

6. Tự động đăng ký component với unplugin-vue-components

import { defineConfig } from 'vite'
import components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    components({
      dirs: ['src/ui'],
      resolvers: [AntDesignVueResolver()],
      dts: './types/components.d.ts'
    })
  ]
})

Sử dụng component mà không cần khai báo:

<template>
  <a-button type="primary">Click me</a-button>
  <UserProfile />
</template>

Cấu hình đầy đủ mẫu

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import compression from 'vite-plugin-compression'
import autoImport from 'unplugin-auto-import/vite'
import compReg from 'unplugin-vue-components/vite'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({ iconDirs: [resolve('src/assets/svg')] }),
    compression({ algorithm: 'gzip', threshold: 10000 }),
    autoImport({ imports: ['vue'], dts: 'types/imports.d.ts' }),
    compReg({ dirs: ['src/components'], dts: 'types/components.d.ts' })
  ],
  resolve: {
    alias: { '@': resolve('src') }
  },
  server: {
    port: 8080,
    proxy: { '/api': 'http://localhost:3000' }
  }
})

Plugin bổ sung đáng chú ý