分享Vite打包优化的实践经验，从分包到性能提升。

随着前端应用复杂度的提升，项目打包体积膨胀导致的加载速度下降已成为影响用户体验的核心痛点。Vite作为新一代前端构建工具，凭借其原生ES模块支持和快速的开发体验，正在成为越来越多项目的首选。本文将基于实际项目经验，从分包策略、可视化分析到性能优化三个维度，深度解析如何通过Vite实现项目打包的全面优化。

在vite.config.js中配置build.rollupOptions.output.manualChunks，实现精准控制代码拆分：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          lodash: ['lodash-es'],
          vue: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus', '@element-plus/icons-vue']
        }
      }
    }
  }
})

使用动态import语法实现路由级代码分割：

const UserProfile = () => import('./views/UserProfile.vue')

配置build.rollupOptions.external避免重复打包：

export default {
  build: {
    rollupOptions: {
      external: ['react', 'react-dom']
    }
  }
}

pnpm add rollup-plugin-visualizer -D

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

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'stats.html'
    })
  ]
})

执行构建命令后生成的stats.html文件将展示：

模块体积占比分布图
依赖树形结构分析
重复依赖检测标记

// 错误示例
import ElementPlus from 'element-plus'

// 正确姿势
import { ElButton, ElInput } from 'element-plus'

优先选择提供ES模块格式的包：

// 替换为ES版本
import lodash from 'lodash-es'

确保tsconfig.json设置"module": "esnext"
检查sideEffects字段配置
启用生产模式构建：NODE_ENV=production

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    viteCompression({
      threshold: 10240 // 超过10KB的文件进行压缩
    })
  ]
})