Vite插件配置聚焦按需引入、体积压缩、资源分析和分包控制；小项目选基础瘦身插件，中大型项目叠加CDN与拆包策略，通过auto-import、components、visualizer、compression及manualChunks实现精准优化。

Vite 插件配置是 Vue 项目打包优化的关键环节，重点在于**按需引入、体积压缩、资源分析和分包控制**。不需要堆砌所有插件，而是根据项目规模选配核心项，小项目聚焦基础瘦身，中大型项目再叠加拆包与 CDN 策略。

按需自动导入组件和 API

避免全局引入整包 UI 库或工具函数，大幅减少冗余代码。

• 安装插件：npm install -D unplugin-auto-import unplugin-vue-components
• 在 vite.config.ts 中配置（以 Element Plus 为例）：

  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  
  export default defineConfig({
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
      })
    ]
  })

• 效果：只打包实际用到的组件（如 ElButton）和 API（如 ref、onMounted），不引入未使用的 ElDialog 或 debounce

生成可视化体积报告

知道“哪里胖”，才能精准减重。打包后自动生成交互式分析页，直观定位大模块。

• 安装：npm install -D rollup-plugin-visualizer
• 启用（生产环境建议开启）：

  import { visualizer } from 'rollup-plugin-visualizer'
  
  plugins: [
    visualizer({
      open: true,
      filename: 'stats.html',
      gzipSize: true,
      brotliSize: true
    })
  ]

• 执行 npm run build 后，自动打开 stats.html，可查看各 chunk 大小、依赖层级、重复引入等

启用 Gzip/Brotli 压缩

静态资源体积缩小 60%~80%，但需服务端配合（如 Nginx 开启 gzip_static on）。

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

• 安装：npm install -D vite-plugin-compression
• 配置（推荐生成 .gz 和 .br 双格式）：

  import viteCompression from 'vite-plugin-compression'
  
  plugins: [
    viteCompression({
      verbose: true,
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240 // ≥10KB 的文件才压缩
    }),
    viteCompression({
      verbose: true,
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240
    })
  ]

• 注意：插件只生成压缩文件，不替代服务器压缩逻辑；若用 Docker 部署，需在 Nginx 配置中启用 gzip_static

精细化分包策略

把第三方依赖单独抽成 vendor chunk，业务代码更新时浏览器仍能复用缓存。

立即学习“前端免费学习笔记（深入）”；

• 在 build.rollupOptions.output.manualChunks 中定义规则：

  build: {
        rollupOptions: {
          output: {
            manualChunks: (id) => {
              if (id.includes('node_modules')) {
                // 将 lodash-es、axios、vue-router 等各自独立成 chunk
                const name = id.toString().split('node_modules/')[1].split('/')[0]
                return `vendor/${name}`
              }
            }
          }
        }
      }

• 配合路由懒加载使用更佳：每个异步路由 import('@/views/xxx.vue') 会自动产出独立 chunk，无需额外配置
• 输出路径建议统一：如 js/[name]-[hash].js，便于 CDN 缓存管理

不复杂但容易忽略