Vite构建工具配置实战：开发服务器代理与生产打包优化策略

小编 • • 前端开发

Vite是Vue团队推出的新一代前端构建工具，基于ESM原生模块加载实现毫秒级开发服务器启动和按需编译。相比Webpack的打包式开发服务器，Vite在大型项目中的开发体验优势显著。前端开发中，Vite已成为Vue3和React项目的首选构建工具。

Vite开发服务器配置与API代理

Vite开发服务器基于Node.js的原生ESM能力，无需预打包即可启动。开发环境中的API跨域请求通过proxy配置解决：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    // API代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        // WebSocket代理
        ws: true,
      },
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true,
        changeOrigin: true,
      },
      // 多个代理目标
      '/upload': {
        target: 'http://localhost:9000',
        changeOrigin: true,
      },
    },
    // HMR配置
    hmr: {
      protocol: 'ws',
      host: 'localhost',
      port: 3001,
      clientPort: 3001,
    },
    // HTTPS开发
    https: {
      key: './certs/localhost-key.pem',
      cert: './certs/localhost.pem',
    },
  },
})

环境变量与模式配置

Vite通过.env文件管理不同环境的环境变量，支持development、production和自定义模式：

// .env.development
VITE_API_BASE_URL=http://localhost:8080
VITE_APP_TITLE=MyApp (Dev)

// .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=MyApp

// .env.staging
VITE_API_BASE_URL=https://staging-api.example.com
VITE_APP_TITLE=MyApp (Staging)

// 代码中使用
const apiUrl = import.meta.env.VITE_API_BASE_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// 类型定义 env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

// package.json脚本
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:staging": "vite build --mode staging",
    "preview": "vite preview"
  }
}

生产构建优化：分包策略与资源压缩

Vite生产构建默认使用Rollup进行打包。通过manualChunks配置可将第三方依赖单独分包，优化首屏加载速度：

// vite.config.js 生产构建优化
export default defineConfig({
  build: {
    // 输出目录
    outDir: 'dist',
    // 生成sourcemap（生产环境建议关闭或使用hidden）
    sourcemap: false,
    // chunk大小警告阈值（KB）
    chunkSizeWarningLimit: 1000,
    // 资源内联阈值（小于4KB的资源内联为base64）
    assetsInlineLimit: 4096,
    // CSS代码分割
    cssCodeSplit: true,
    // 压缩配置
    minify: 'esbuild',
    // esbuild压缩选项
    esbuildOptions: {
      target: 'es2020',
      cssMinify: true,
      drop: ['console', 'debugger'],
    },
    // Rollup选项
    rollupOptions: {
      output: {
        // 入口文件名
        entryFileNames: 'assets/js/[name]-[hash].js',
        // chunk文件名
        chunkFileNames: 'assets/js/[name]-[hash].js',
        // 资源文件名
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        // 手动分包
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['element-plus', '@element-plus/icons-vue'],
          'utils-vendor': ['axios', 'lodash-es', 'dayjs'],
          'chart-vendor': ['echarts', 'vue-echarts'],
        },
        // 高级分包策略（函数形式）
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('vue') || id.includes('pinia')) {
              return 'vue-vendor'
            }
            if (id.includes('element-plus')) {
              return 'ui-vendor'
            }
            if (id.includes('echarts')) {
              return 'chart-vendor'
            }
            return 'vendor'
          }
        },
      },
    },
  },
})

Gzip压缩与CDN配置

Vite本身不处理Gzip压缩，需通过插件实现。配合CDN可将静态资源分发到边缘节点：

// 安装压缩插件
// npm install vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    // Gzip压缩
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240, // 仅压缩大于10KB的文件
      deleteOriginFile: false,
    }),
    // Brotli压缩（更高效）
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        // 配置CDN公共路径
        // 静态资源将从这个CDN地址加载
      },
    },
  },
})

// .env.production中配置CDN路径
// VITE_CDN_URL=https://cdn.example.com
// 代码中动态引用
const cdnUrl = import.meta.env.VITE_CDN_URL || ''
const assetUrl = (path) => `${cdnUrl}${path}`

按需导入与Tree Shaking优化

Vite对ESM的Tree Shaking支持完善，配合组件库的按需导入可大幅减少打包体积：

// Element Plus按需导入
// npm install unplugin-vue-components unplugin-auto-import -D

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: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts',
    }),
  ],
})

// ECharts按需导入
// echarts/use.js
import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  BarChart, LineChart, PieChart,
  GridComponent, TooltipComponent, LegendComponent,
  CanvasRenderer,
])

export default echarts

// 打包体积对比:
// 全量引入 echarts: ~1MB
// 按需引入: ~200KB

构建分析与性能诊断

使用rollup-plugin-visualizer分析打包体积分布，定位体积优化方向：

// npm install rollup-plugin-visualizer -D
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      filename: 'dist/stats.html',
      template: 'treemap',
      gzipSize: true,
      brotliSize: true,
    }),
  ],
})

// 构建后查看 dist/stats.html
// 可看到每个模块的体积占比
// 针对大模块优化:
// 1. 替换体积大的依赖（moment -> dayjs）
// 2. 按需引入（lodash -> lodash-es）
// 3. 动态导入（路由懒加载）
// 4. 外部化CDN加载（externals配置）

// externals配置
export default defineConfig({
  build: {
    rollupOptions: {
      external: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        'element-plus': 'ElementPlus',
      },
    },
  },
})

// index.html中通过CDN引入外部化的库
// <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
// <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.prod.js"></script>

Vite的构建优化核心在于减少打包体积和优化资源加载策略。开发环境依赖ESM实现快速启动，生产环境依赖Rollup实现高效打包。实际项目中需平衡开发体验与生产性能：开发环境保留完整sourcemap和HMR，生产环境启用压缩、分包和Tree Shaking。前端工程化中可将Vite配置纳入CI/CD流水线，通过不同mode的.env文件实现多环境构建的一体化管理。

原创文章，作者：小编，如若转载，请注明出处：https://www.yunthe.com/vite-gou-jian-gong-ju-pei-zhi-shi-zhan-kai-fa-fu-wu-qi-dai/

赞 (0)
小编小编
0
上一篇 13小时前
下一篇 13小时前

相关推荐