怎样配置 Vite 插件以优化 Vue 项目打包？-Vue.js-PHP中文网

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

怎样配置 vite 插件以优化 vue 项目打包？

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

生成可视化体积报告

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

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

安装：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）。

安装：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}`
            }
          }
        }
      }
    }