valec3 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
// 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
npm install -D rollup-plugin-visualizer
Resources
- Use Vite for modern apps
- Code split by route
- Analyze bundle regularly