Vite进阶常用插件详解与使用完整指南

npm i -D vite-plugin-inspect

import { defineConfig } from 'vite'
import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [
    Inspect({
      // 是否在启动时自动打开浏览器
      open: true, 
      // 输出目录
      outputDir: '.vite-inspect', 
      // 是否启用 HTTPS (通常不需要)
      https: false,
    })
  ],
  // 建议仅在开发环境开启，避免影响生产构建性能
  // 或者通过环境变量控制
  // process.env.NODE_ENV === 'development' ? Inspect() : []
})

npm i -D rollup-plugin-visualizer

import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      // 生成的文件名
      filename: 'dist/stats.html', 
      // 打开生成的文件
      open: true, 
      // 图表类型: 'sunburst' (旭日图), 'treemap' (树状图), 'network' (网络图)
      template: 'sunburst', 
      // 是否包含 gzip 后的大小分析
      gzipSize: true, 
      // 是否包含 brotli 后的大小分析
      brotliSize: true, 
    })
  ],
  build: {
    // 确保 sourcemap 开启以便更准确分析（可选，但推荐）
    sourcemap: true, 
  }
})

npm i -D vite-plugin-pwa

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate', // 自动更新策略
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: '我的 Vite PWA 应用',
        short_name: 'VitePWA',
        description: '一个基于 Vite 的 PWA 示例',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone', // 隐藏浏览器地址栏
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable' // 支持安卓自适应图标
          }
        ]
      },
      workbox: {
        // 缓存策略配置
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
        // 运行时缓存示例：缓存 API 请求
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.example\.com\/.*/i,
            handler: 'NetworkFirst', // 优先网络，失败则缓存
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 10,
                maxAgeSeconds: 60 * 60 * 24 // 24 小时
              }
            }
          }
        ]
      }
    })
  ]
})

npm i -D vite-plugin-eslint
# 确保已安装 eslint
npm i -D eslint

import { defineConfig } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    eslintPlugin({
      // 包含的文件
      include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'], 
      // 排除的文件
      exclude: ['src/**/*.spec.ts'], 
      // 发现错误时是否失败构建 (开发环境通常设为 false 以免打断 HMR)
      failOnError: process.env.NODE_ENV === 'production', 
      // 发现警告时是否失败构建
      failOnWarning: false, 
      // 是否自动修复 (谨慎使用，可能会覆盖代码)
      fix: false, 
      // 缓存检查结果以提高速度
      cache: true, 
      cacheLocation: 'node_modules/.cache/.eslintcache',
    })
  ]
})

npm i -D unplugin-icons
# 如果使用 Vue，还需要安装 @iconify-json/<集合名>
# 例如安装 Material Design Icons:
npm i -D @iconify-json/mdi

import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite' // 配合组件自动注册

export default defineConfig({
  plugins: [
    Icons({
      // 自动加载图标编译器
      compiler: 'vue3', 
      // 自定义图标缩放
      scale: 1.2, 
      // 默认类名
      defaultClass: 'icon', 
      // 自定义图标集搜索路径 (如果有本地 svg)
      customCollections: {
        // 'my-icons': { ... }
      }
    }),
    
    // 配合 unplugin-vue-components 实现自动导入
    Components({
      resolvers: [
        IconsResolver({
          // 自动导入前缀，例如 <MdiHome>
          prefix: '', 
          // 启用的图标集，enabled 表示所有，也可以指定 ['mdi', 'fa']
          enabledCollections: ['mdi'], 
        }),
      ],
    }),
  ]
})

<template>
  <div>
    <!-- 直接使用，无需 import -->
    <!-- 格式：<图标集前缀>-<图标名> (如果配置了 prefix 为空) -->
    <MdiHome class="text-red-500" />
    <MdiAccountCircle :size="30" />
    
    <!-- 或者使用组件形式 -->
    <IconMdiHome />
  </div>
</template>

<script setup>
// 甚至不需要手动导入，unplugin-icons 会自动处理
// 如果没配自动注册，需手动: import MdiHome from '~icons/mdi/home'
</script>

<style>
.icon {
  vertical-align: middle;
}
</style>

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "analyze": "vite build --mode analyze", 
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "vite-plugin-inspect": "^0.8.0",
    "rollup-plugin-visualizer": "^5.12.0",
    "vite-plugin-pwa": "^0.19.0",
    "unplugin-icons": "^0.18.0",
    "@iconify-json/mdi": "^1.1.0"
  }
}