# 前端构建优化（Vite 代码分割 + 路由懒加载）

> 适用于 Vue 3 + Vite 项目，Element Plus + ECharts 技术栈

## 问题

Vue 3 + Element Plus + ECharts 项目构建后，默认所有代码打包成一个 JS 文件（通常 2~3MB），首屏加载全量代码，严重影响首次加载速度。

## 优化方案

### 1. Vite `manualChunks` 拆包

在 `vite.config.js` 中配置 `build.rollupOptions.output.manualChunks`，将大体积第三方库拆为独立 chunk：

```js
// vite.config.js
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // echarts 单独拆包（~1MB，仅访问图表页面时加载）
          if (id.includes('node_modules/echarts')) {
            return 'echarts'
          }
          // element-plus 单独拆包（~1MB，浏览器缓存）
          if (id.includes('node_modules/element-plus')) {
            return 'element-plus'
          }
          // vue 核心库单独拆包（~120KB）
          if (id.includes('node_modules/vue') || id.includes('node_modules/@vue')) {
            return 'vue-core'
          }
        },
      },
    },
    chunkSizeWarningLimit: 500, // 提高告警阈值，避免拆包后仍有大 chunk 告警
  },
})
```

**效果**：
| Chunk | 大小 | 加载时机 |
|:------|:----:|:--------|
| `vue-core` | ~120KB | 首屏 |
| `element-plus` | ~1MB | 首屏（浏览器缓存后不重复下载） |
| `echarts` | ~1MB | 仅访问图表页面时按需加载 |
| 各页面组件 | 2~15KB | 按需加载 |

### 2. 路由懒加载（动态 import）

将 `router/index.js` 中的静态 import 改为动态 `() => import(...)`：

```js
// ❌ 静态 import（全量加载）
import Dashboard from '../views/dashboard/Index.vue'

// ✅ 动态 import（按需加载）
const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/dashboard/Index.vue'),
  },
]
```

Vite 会自动为每个动态 import 生成独立 chunk，文件名基于组件名（如 `Index-abc123.js`）。

### 3. 验证优化效果

```bash
# 构建前
ls -lh dist/assets/
# 输出：index-DoEo0YCm.js  2.3M  ← 单文件

# 配置后构建
npm run build
ls -lh dist/assets/
# 输出：
# vue-core-BuIKajZo.js      119KB
# element-plus-C03w9GoR.js  1.0MB
# echarts-Bb6yjXMn.js       1.0MB
# Index-xxx.js               2~15KB（每个页面）
# ...
```

## 注意事项

1. **manualChunks 函数**接收的是模块 ID（绝对路径），用 `id.includes()` 匹配 `node_modules` 中的包名
2. **路由懒加载**只在用户访问对应路由时才加载 chunk，首次访问某页面会有短暂加载延迟（通常 < 200ms）
3. **echarts 拆包后**，只有访问包含 ECharts 图表的页面（仪表盘、经营数据等）才会加载 echarts chunk
4. **chunkSizeWarningLimit** 建议设为 500KB，避免拆包后 element-plus/echarts 仍触发告警（它们确实很大）
5. **浏览器缓存**：element-plus 和 vue-core 拆为独立 chunk 后，只要版本不变，浏览器会缓存，后续页面访问不再下载