Vite 构建打包优化深度解析

本文讲解 Vite 的构建和打包优化策略，提升构建速度和最终产物质量。

目录

1. Vite 构建原理

1.1 开发模式

启动 Vite → 创建开发服务器
    ↓
浏览器请求 → 按需编译 → 返回 ESM 源码
    ↓
文件变化 → WebSocket 推送 HMR → 模块替换

1.2 生产模式

启动构建 → Rollup 打包
    ↓
依赖分析 → 生成模块图
    ↓
代码分割 → 生成多个 Chunk
    ↓
Tree Shaking → 移除未使用代码
    ↓
代码压缩 → 生成最终文件

2. 代码分割

2.1 配置代码分割

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 第三方库
          if (id.includes('node_modules')) {
            return 'vendor'
          }

          // Vue 相关
          if (id.includes('vue') || id.includes('pinia')) {
            return 'vue-vendor'
          }

          // 路由相关
          if (id.includes('router')) {
            return 'router'
          }

          // 工具函数
          if (id.includes('utils') || id.includes('helpers')) {
            return 'utils'
          }
        }
      }
    }
  }
})

2.2 策略对比

策略 说明 适用场景
vendor 第三方库单独打包 减少重复代码
vue-vendor Vue 生态单独打包 框架升级不影响业务
page 每个页面单独打包 懒加载、减少首屏

3. Tree Shaking

3.1 原理

Rollup 分析 ES Module 的 import/export，移除未使用的代码。

3.2 确保生效

export default defineConfig({
  build: {
    rollupOptions: {
      treeshake: {
        // 自动开启
        moduleSideEffects: false
      }
    }
  }
})

3.3 package.json 配置

{
  "name": "my-package",
  "sideEffects": false
}

// 指定某些文件有副作用
{
  "sideEffects": [
    "*.css",
    "dist/*",
    "./style/**"
  ]
}

4. 压缩优化

4.1 CSS 压缩

export default defineConfig({
  css: {
    devSourcemap: false,
    postcss: {
      plugins: [
        require('cssnano')({
          preset: 'default'
        })
      ]
    }
  }
})

4.2 JS 压缩（默认开启）

export default defineConfig({
  build: {
    minify: 'esbuild'  // 'esbuild' 或 'terser'
  }
})
选项 速度 兼容性
esbuild 极快 好
terser 较快 更好

4.3 HTML 压缩

export default defineConfig({
  build: {
    minify: 'esbuild',
    terserOptions: {
      compress: {
        drop_console: true,  // 移除 console
        drop_debugger: true
      }
    }
  }
})

5. 构建速度优化

5.1 Esbuild 预构建

export default defineConfig({
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia'],
    exclude: ['some-esm-package']
  }
})

5.2 减少依赖扫描

export default defineConfig({
  optimizeDeps: {
    disabled: 'build'  // 构建时禁用
  }
})

5.3 并行构建

export default defineConfig({
  build: {
    // 默认使用多核
    commonjsOptions: {
      esbuildTargets: ['es2015']
    }
  }
})

6. 资源优化

6.1 资源内联

export default defineConfig({
  build: {
    assetsInlineLimit: 4096  // 小于 4KB 内联为 Base64
  }
})

6.2 图片优化

import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.6, 0.8] },
      svgo: {
        plugins: [
          { name: 'preset-default', params: { overrides: { cleanupIDs: false } } }
        ]
      }
    })
  ]
})

6.3 CSS 代码分割

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true  // 生成 legacy chunk
    })
  ]
})

7. 实战配置

7.1 完整配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),

    // Gzip 压缩
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz'
    })
  ],

  // 别名
  resolve: {
    alias: {
      '@': '/src'
    }
  },

  // 构建
  build: {
    outDir: 'dist',
    assetsDir: 'assets',

    // 代码分割
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 第三方库按类别分割
            if (id.includes('vue')) {
              return 'vue-vendor'
            }
            if (id.includes('axios')) {
              return 'http-vendor'
            }
            return 'vendor'
          }
        }
      },
      chunkFileNames: 'js/[name]-[hash].js',
      entryFileNames: 'js/[name]-[hash].js',
      assetFileNames: '[ext]/[name]-[hash].[ext]'
    },

    // 压缩
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log', 'console.info']
      },
      format: {
        comments: false
      }
    },

    // 资源内联
    assetsInlineLimit: 4096,

    // chunk 大小警告
    chunkSizeWarningLimit: 500,

    // Source Map
    sourcemap: false,

    // Rollup 配置
    rollupOptions: {
      treeshake: {
        moduleSideEffects: false
      }
    }
  },

  // 依赖优化
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia', 'axios'],
    force: false,
    esbuildOptions: {
      target: 'es2020'
    }
  },

  // CSS
  css: {
    devSourcemap: false,
    postcss: {
      plugins: [
        require('autoprefixer')({
          overrideBrowserslist: ['> 0.25%', 'not dead']
        })
      ]
    }
  },

  // 服务器
  server: {
    port: 3000,
    open: true
  }
})

7.2 常用插件

插件 用途
@vitejs/plugin-legacy 支持旧浏览器
vite-plugin-compression 生成 gzip
vite-plugin-imagemin 图片优化
vite-plugin-visualizer 打包分析
vite-plugin-pwa PWA 支持

7.3 打包分析

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true
    })
  ]
})

总结

优化方向 策略 效果
代码分割 manualChunks 减少首次加载
Tree Shaking sideEffects 移除未使用代码
压缩 terser/esbuild 减小文件体积
依赖预构建 optimizeDeps 加快启动速度
资源内联 assetsInlineLimit 减少请求
CSS 压缩 cssnano 减小 CSS 体积
图片优化 imagemin 减小图片体积

Vite 默认配置已经很优秀，根据项目特点按需调整即可。