Vite配置优化

# 完整打包配置示例

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

# 关键配置说明

代码分割优化

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'
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

静态资源处理

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

1
2
3
4
5

兼容性处理

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

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

1
2
3
4
5
6
7
8

自定义打包命令

// 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"
  }
}

1
2
3
4
5
6
7
8
9

环境变量配置

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

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

1
2
3
4
5
6

# 优化建议

图片压缩：

npm install vite-plugin-imagemin -D

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

1
2
3
4
5
6
7
8

Gzip压缩：

npm install vite-plugin-compression -D

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

1
2
3
4
5
6
7
8

CDN加速：

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

1
2
3
4
5
6
7
8
9
10
11
12

文件体积过大：

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

路由懒加载失效

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

1
2

静态资源404：

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

1
2

样式丢失：

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

1
2
3
4

#Vite

最近更新时间： 2025/05/09 09:23:27

← v-show 不能用在template