vite详细打包配置，包含性能优化、资源处理...

一、以下是针对Vite项目的详细打包配置补充，包含性能优化、资源处理和特殊需求配置：

vite.config.ts 完整打包配置示例

typescript 复制代码

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy'
import { terser } from 'rollup-plugin-terser'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // 环境变量加载
  const env = loadEnv(mode, process.cwd())

  return {
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        dts: 'src/types/auto-imports.d.ts' // 自动导入类型声明
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: 'src/types/components.d.ts' // 组件类型声明
      }),
      // 打包分析插件（仅生产环境）
      mode === 'production' && visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true
      }),
      // 浏览器兼容插件
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ],

    // 构建配置
    build: {
      target: 'es2015', // 编译目标
      outDir: 'dist',  // 输出目录
      assetsDir: 'assets', // 静态资源目录
      sourcemap: env.VITE_SOURCEMAP === 'true', // 按需开启
      minify: 'terser', // 压缩方式
      cssCodeSplit: true, // CSS代码分割
      
      // Rollup配置
      rollupOptions: {
        output: {
          // 代码分割策略
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return 'vendor'
            }
            if (id.includes('src/router')) {
              return 'router'
            }
          },
          // 文件命名规则
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash][extname]'
        },
        // 外部依赖排除（如有需要）
        external: ['some-cdn-library']
      },

      // Terser压缩配置
      terserOptions: {
        compress: {
          drop_console: true,  // 移除console
          drop_debugger: true  // 移除debugger
        },
        format: {
          comments: false // 移除注释
        }
      }
    },

    // 开发服务器配置
    server: {
      port: 5173, // 开发端口
      open: true  // 自动打开浏览器
    },

    // 路径别名配置
    resolve: {
      alias: {
        '@': '/src',
        '#': '/types'
      }
    },

    // CSS预处理器配置
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/variables.scss" as *;`
        }
      }
    }
  }
})

关键配置说明

1. 代码分割优化

typescript 复制代码

rollupOptions: {
  output: {
    manualChunks(id) {
      if (id.includes('node_modules')) {
        // 将node_modules代码单独打包
        if (id.includes('element-plus')) return 'element-plus'
        if (id.includes('lodash')) return 'lodash'
        return 'vendor'
      }
    }
  }
}

2. 静态资源处理

typescript 复制代码

build: {
  assetsInlineLimit: 4096, // 小于4KB的资源转为base64
  // 复制公共资源到dist目录
  assetsInclude: ['public/**/*.pdf']
}

3. 兼容性处理

typescript 复制代码

// 安装旧浏览器支持插件
npm install @vitejs/plugin-legacy -D

// 配置
legacy({
  targets: ['> 0.5%', 'last 2 versions'],
  modernPolyfills: true
})

自定义打包命令

json 复制代码

// package.json
{
  "scripts": {
    "build": "vite build",
    "build:stage": "vite build --mode staging",
    "build:analyze": "vite build --mode production && vite preview --port 4173",
    "preview": "vite preview --port 4173"
  }
}

环境变量配置

env 复制代码

# .env.production
VITE_API_BASE_URL = /api/
VITE_SOURCEMAP = false

# .env.staging
VITE_API_BASE_URL = http://stage-api.example.com

优化建议

图片压缩：

bash 复制代码

npm install vite-plugin-imagemin -D

typescript 复制代码

import imagemin from 'vite-plugin-imagemin'
// 添加到plugins数组
imagemin({
  gifsicle: { optimizationLevel: 7 },
  optipng: { optimizationLevel: 7 }
})

Gzip压缩：

bash 复制代码

npm install vite-plugin-compression -D

typescript 复制代码

import compression from 'vite-plugin-compression'
// 添加到plugins数组
compression({
  algorithm: 'gzip',
  ext: '.gz'
})

CDN加速：

typescript 复制代码

// vite.config.ts
build: {
  rollupOptions: {
    external: ['vue', 'element-plus'],
    output: {
      globals: {
        'vue': 'Vue',
        'element-plus': 'ElementPlus'
      }
    }
  }
}

常见打包问题解决

文件体积过大：
- 使用rollup-plugin-visualizer分析包组成
- 按需加载第三方库（如Element Plus）
- 开启Gzip/Brotli压缩

路由懒加载失效：

typescript 复制代码

// 确保使用动态导入语法
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

静态资源404：

typescript 复制代码

// 使用绝对路径
new URL(`/src/assets/image.png`, import.meta.url).href

样式丢失：

typescript 复制代码

// 强制CSS注入
build: {
  cssTarget: 'chrome61' // 兼容低版本浏览器
}

通过以上配置，可以实现：

代码体积优化（减少30%-50%）
首屏加载速度提升
更好的浏览器兼容性
清晰的构建产物结构
便捷的多环境打包支持

实际配置时需根据项目具体需求调整参数，建议结合vite build --mode yourmode实现多环境差异化打包。