npm package: @huaiyou/config-build
Description: Shared Vite build configuration
Latest version: 1.0.0

# @huaiyou/config-build

> 基于 Vite 的共享构建配置，支持 TypeScript 和 React。

## 📦 安装

```bash
pnpm add -D @huaiyou/config-build vite
```

## 🚀 使用方法

### Base 配置（通用项目）

创建 `vite.config.ts`：

```typescript
import { defineConfig, mergeConfig } from 'vite';
import { baseConfig } from '@huaiyou/config-build/base';

export default defineConfig(
  mergeConfig(baseConfig, {
    // 你的自定义配置
  })
);
```

### React 配置

对于 React 项目：

```typescript
import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';

export default defineConfig(
  mergeConfig(reactConfig, {
    // 你的自定义配置
    resolve: {
      alias: {
        '@': '/src',
      },
    },
  })
);
```

## ✨ 特性

### Base 配置

- ✅ **ES2020 目标**: 现代浏览器支持
- ✅ **源码映射**: 便于调试
- ✅ **代码分割**: 自动分离 vendor 代码
- ✅ **资源优化**: 压缩和优化静态资源
- ✅ **开发服务器**: 快速的 HMR 热更新

### React 配置

继承 Base 配置，额外包含：

- ✅ **React 插件**: 官方 React 插件
- ✅ **自动 JSX**: React 17+ 自动 JSX 运行时
- ✅ **Fast Refresh**: 保持组件状态的热更新
- ✅ **优化依赖**: React 预构建优化

## ⚙️ 配置说明

### 构建选项

| 选项                    | 值        | 说明                    |
| ----------------------- | --------- | ----------------------- |
| `target`                | `es2020`  | 构建目标                |
| `sourcemap`             | `true`    | 生成源码映射            |
| `minify`                | `esbuild` | 使用 esbuild 压缩       |
| `chunkSizeWarningLimit` | `1000`    | chunk 大小警告限制 (KB) |

### 开发服务器

| 选项   | 值     | 说明           |
| ------ | ------ | -------------- |
| `port` | `3000` | 开发服务器端口 |
| `host` | `true` | 监听所有地址   |
| `open` | `true` | 自动打开浏览器 |
| `cors` | `true` | 启用 CORS      |

### 代码分割策略

自动将代码分割为以下 chunks：

- `vendor-react`: React 和 React DOM
- `vendor`: 其他第三方依赖
- 业务代码按需动态导入

## 🔧 高级用法

### 路径别名

```typescript
import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';
import path from 'path';

export default defineConfig(
  mergeConfig(reactConfig, {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
        '@utils': path.resolve(__dirname, 'src/utils'),
      },
    },
  })
);
```

### 环境变量

```typescript
import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';

export default defineConfig(
  mergeConfig(reactConfig, {
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
  })
);
```

### 代理配置

```typescript
import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';

export default defineConfig(
  mergeConfig(reactConfig, {
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  })
);
```

### 自定义插件

```typescript
import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';
import { visualizer } from 'rollup-plugin-visualizer';

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

## 📝 Scripts 配置

在 `package.json` 中添加构建脚本：

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "type-check": "tsc --noEmit"
  }
}
```

## 🚀 性能优化建议

1. **使用动态导入**: 路由和大型组件使用 `import()`
2. **优化图片**: 使用现代格式 (WebP, AVIF)
3. **Tree Shaking**: 按需导入第三方库
4. **预加载**: 关键资源使用 `<link rel="preload">`
5. **CDN**: 静态资源部署到 CDN

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进配置。

## 📄 License

MIT