---
name: valec3/frontend-delivery-build-tools
source: https://app.decimal.ai/s/valec3-frontend-delivery-build-tools@1/SKILL.md
source_sha256: 046adfbd0f12
---

# Frontend Delivery Build Tools

## When to use this skill
- Configuring build process
- Optimizing bundle size
- Setting up Vite/Webpack

## Workflow
- [ ] Choose build tool (Vite recommended)
- [ ] Configure for production
- [ ] Optimize bundle size
- [ ] Enable code splitting
- [ ] Analyze bundle

## Instructions

### Vite Config
```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog']
        }
      }
    }
  }
});
```

### Bundle Analysis
```bash
npm install -D rollup-plugin-visualizer
```

## Resources
- Use Vite for modern apps
- Code split by route
- Analyze bundle regularly