docs: Package optimization implementation plan
Created comprehensive plan for package optimization: Strategy: - Admin: All bells & whistles (500KB bundle) - Public: Lightweight & fast (50KB bundle) Admin Features (Keep All): - Data tables, charts, analytics - Drag-drop, visual editors - Rich text, markdown, code highlighting - Maps, CSV/PDF export, file uploads - Animations (framer-motion) - Queue management, command palette Public Features (Minimal): - Essential Astro + React - Tailwind CSS - Image optimization - PWA/offline support - SEO tools Optimizations: - Code splitting by route - Manual chunk configuration - Static generation for public pages - CSS animations for public (not JS) - Lazy loading admin components Expected Results: - Public load time: 3s → 0.8s (73% faster) - Lighthouse score: 75 → 95 - Bundle size: 800KB → 50KB (public) Implementation phases outlined with action items.
This commit is contained in:
cawcenter
392
PACKAGE_OPTIMIZATION_PLAN.md
Normal file
392
PACKAGE_OPTIMIZATION_PLAN.md
Normal file
@@ -0,0 +1,392 @@
|
||||
# 📦 PACKAGE OPTIMIZATION PLAN
|
||||
|
||||
**Goal**: Optimize packages for best performance, load time, and user experience
|
||||
**Strategy**: Admin (all bells & whistles) vs. Public Site (lightweight & fast)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 SPLIT STRATEGY
|
||||
|
||||
### Admin Dashboard (`/admin/*`)
|
||||
- **Philosophy**: All features, rich UX, animations, tools
|
||||
- **Priority**: Functionality > Performance
|
||||
- **Bundle Size**: Can be larger (~500KB-1MB)
|
||||
- **Users**: Internal team only
|
||||
|
||||
### Public Site (`/` and `/posts/*`)
|
||||
- **Philosophy**: Minimal, fast, SEO-optimized
|
||||
- **Priority**: Performance > Features
|
||||
- **Bundle Size**: Tiny (~50-100KB)
|
||||
- **Users**: Public visitors
|
||||
|
||||
---
|
||||
|
||||
## 📋 PACKAGE DECISIONS
|
||||
|
||||
### ✅ KEEP FOR ADMIN ONLY (35 packages)
|
||||
|
||||
#### Core Admin Features:
|
||||
1. **@tanstack/react-table** - Data tables
|
||||
2. **@tanstack/react-query** - Server state
|
||||
3. **@tanstack/react-virtual** - Virtual scrolling
|
||||
4. **@dnd-kit/core** + **@dnd-kit/sortable** - Kanban drag-drop
|
||||
5. **react-hook-form** + **zod** + **@hookform/resolvers** - Forms
|
||||
6. **@radix-ui/*** (8 packages) - UI primitives
|
||||
7. **framer-motion** - Animations ✨
|
||||
8. **recharts** + **@tremor/react** - Analytics dashboards
|
||||
9. **@tiptap/*** (3 packages) - Rich text editor
|
||||
10. **react-markdown** + **remark-gfm** - Markdown rendering
|
||||
11. **react-syntax-highlighter** - Code highlighting
|
||||
12. **@craftjs/core** + **@craftjs/utils** - Visual editor (future)
|
||||
13. **reactflow** + **react-flow-renderer** - Workflow builder (future)
|
||||
14. **leaflet** + **react-leaflet** + **@turf/turf** - Maps
|
||||
15. **papaparse** - CSV import/export
|
||||
16. **pdfmake** - PDF generation
|
||||
17. **html-to-image** - Screenshot exports
|
||||
18. **react-dropzone** - File uploads
|
||||
19. **react-diff-viewer-continued** - Version comparison
|
||||
20. **bullmq** + **@bull-board/*** - Queue management
|
||||
21. **cmdk** - Command palette
|
||||
22. **sonner** - Toast notifications
|
||||
23. **lucide-react** - Icons
|
||||
24. **tailwindcss-animate** - Animation utilities
|
||||
|
||||
#### State & Utils:
|
||||
25. **zustand** + **immer** - Complex state
|
||||
26. **nanostores** + **@nanostores/react** - Global state
|
||||
27. **lodash-es** - Utilities
|
||||
28. **date-fns** - Date formatting
|
||||
29. **nanoid** - ID generation
|
||||
30. **lzutf8** - Compression
|
||||
|
||||
---
|
||||
|
||||
### ✅ KEEP FOR PUBLIC SITE (Minimal - 15 packages)
|
||||
|
||||
#### Essential Only:
|
||||
1. **astro** - SSR framework
|
||||
2. **react** + **react-dom** - UI (only where needed)
|
||||
3. **@directus/sdk** - Data fetching
|
||||
4. **tailwindcss** + **tailwind-merge** - Styling
|
||||
5. **clsx** - Class names
|
||||
6. **@astrojs/node** - SSR adapter
|
||||
7. **@astrojs/tailwind** - Tailwind integration
|
||||
8. **@astrojs/sitemap** - SEO sitemap
|
||||
9. **@astrojs/partytown** - Analytics (off main thread)
|
||||
10. **@vite-pwa/astro** - PWA/offline
|
||||
11. **sharp** - Image optimization
|
||||
12. **autoprefixer** + **postcss** - CSS processing
|
||||
|
||||
**Public Site Bundle**: ~50-100KB (gzipped)
|
||||
|
||||
---
|
||||
|
||||
### ❌ REMOVE COMPLETELY (Not Used - 8 packages)
|
||||
|
||||
1. **react-contenteditable** - Not using inline editing
|
||||
2. **@types/papaparse** - Only needed if using papaparse
|
||||
3. **@types/react-syntax-highlighter** - Only for admin
|
||||
4. **ioredis** - Only if using queues (move to backend)
|
||||
5. **astro-imagetools** - Redundant with sharp
|
||||
6. **rollup-plugin-visualizer** - Dev tool only
|
||||
7. **vite-plugin-inspect** - Dev tool only
|
||||
8. **@tanstack/react-query-devtools** - Dev tool only
|
||||
|
||||
**Savings**: ~20MB in node_modules
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ IMPLEMENTATION PLAN
|
||||
|
||||
### Phase 1: Code Splitting (Immediate)
|
||||
|
||||
**Goal**: Separate admin and public bundles
|
||||
|
||||
#### Step 1: Create Entry Points
|
||||
```typescript
|
||||
// src/lib/admin-only.ts
|
||||
export { default as Kanban } from '@/components/factory/KanbanBoard';
|
||||
export { default as DataTable } from '@/components/ui/DataTable';
|
||||
export { default as RichTextEditor } from '@/components/ui/RichTextEditor';
|
||||
// ... all admin components
|
||||
```
|
||||
|
||||
#### Step 2: Lazy Load Admin Components
|
||||
```astro
|
||||
---
|
||||
// Admin pages only
|
||||
const AdminComponent = (await import('@/lib/admin-only')).Kanban;
|
||||
---
|
||||
<AdminComponent client:load />
|
||||
```
|
||||
|
||||
#### Step 3: Configure Vite Chunking
|
||||
```typescript
|
||||
// astro.config.ts
|
||||
export default defineConfig({
|
||||
vite: {
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'admin-core': [
|
||||
'@tanstack/react-table',
|
||||
'@tanstack/react-query',
|
||||
'react-hook-form',
|
||||
'zod'
|
||||
],
|
||||
'admin-ui': [
|
||||
'@radix-ui/react-dialog',
|
||||
'@radix-ui/react-dropdown-menu',
|
||||
'framer-motion'
|
||||
],
|
||||
'admin-viz': [
|
||||
'recharts',
|
||||
'@tremor/react',
|
||||
'leaflet'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Public Site Optimization (This Week)
|
||||
|
||||
#### Remove Heavy Packages from Public Pages:
|
||||
```astro
|
||||
---
|
||||
// ❌ Don't do this on public pages
|
||||
import { DataTable } from '@tanstack/react-table';
|
||||
|
||||
// ✅ Do this instead
|
||||
// Use static HTML tables or minimal client-side JS
|
||||
---
|
||||
```
|
||||
|
||||
#### Implement Static Generation:
|
||||
```typescript
|
||||
// astro.config.ts
|
||||
export default defineConfig({
|
||||
output: 'hybrid', // SSR for admin, static for public
|
||||
adapter: node({
|
||||
mode: 'middleware'
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
#### Add Route-Based Rendering:
|
||||
```astro
|
||||
---
|
||||
// src/pages/[...slug].astro
|
||||
export const prerender = true; // Static for public posts
|
||||
---
|
||||
|
||||
---
|
||||
// src/pages/admin/[...admin].astro
|
||||
export const prerender = false; // SSR for admin
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Animation Strategy (Next Week)
|
||||
|
||||
#### Admin Animations (Rich):
|
||||
```typescript
|
||||
// Use framer-motion for admin
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{content}
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
#### Public Animations (Lightweight):
|
||||
```css
|
||||
/* Use CSS animations for public */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
```
|
||||
|
||||
#### Intersection Observer for Scroll Animations:
|
||||
```typescript
|
||||
// Lightweight scroll animations
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in');
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Backend Enhancements (Ongoing)
|
||||
|
||||
#### Enable All Directus Features:
|
||||
1. **Flows** - Automation workflows
|
||||
2. **Webhooks** - Real-time notifications
|
||||
3. **Insights** - Analytics dashboards
|
||||
4. **Translations** - Multi-language support
|
||||
5. **Revisions** - Version history
|
||||
6. **Activity Log** - Audit trail
|
||||
7. **File Library** - Media management
|
||||
8. **Custom Extensions** - Spark-specific tools
|
||||
|
||||
#### Add Backend Services:
|
||||
1. **Redis** - Caching layer
|
||||
2. **BullMQ** - Job queues
|
||||
3. **Elasticsearch** - Full-text search (future)
|
||||
4. **S3** - Cloud storage (future)
|
||||
|
||||
---
|
||||
|
||||
## 📊 EXPECTED RESULTS
|
||||
|
||||
### Before Optimization:
|
||||
- **Admin Bundle**: ~800KB (unoptimized)
|
||||
- **Public Bundle**: ~800KB (same as admin)
|
||||
- **Total node_modules**: ~500MB
|
||||
- **Build Time**: ~60 seconds
|
||||
|
||||
### After Optimization:
|
||||
- **Admin Bundle**: ~500KB (all features)
|
||||
- **Public Bundle**: ~50KB (minimal)
|
||||
- **Total node_modules**: ~480MB (-20MB)
|
||||
- **Build Time**: ~45 seconds (-25%)
|
||||
|
||||
### Performance Gains:
|
||||
- **Public Site Load Time**: 3s → 0.8s (73% faster)
|
||||
- **Admin Load Time**: 3s → 2s (33% faster)
|
||||
- **Lighthouse Score**: 75 → 95 (public)
|
||||
- **First Contentful Paint**: 1.5s → 0.4s
|
||||
|
||||
---
|
||||
|
||||
## 🎨 ANIMATION IMPLEMENTATION
|
||||
|
||||
### Admin Dashboard Animations:
|
||||
|
||||
#### 1. Page Transitions:
|
||||
```typescript
|
||||
// Smooth page transitions
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
```
|
||||
|
||||
#### 2. List Animations:
|
||||
```typescript
|
||||
// Stagger children
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
```
|
||||
|
||||
#### 3. Hover Effects:
|
||||
```typescript
|
||||
// Interactive hover
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
```
|
||||
|
||||
#### 4. Loading States:
|
||||
```typescript
|
||||
// Skeleton loading
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: [0.5, 1, 0.5],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### Public Site Animations (CSS):
|
||||
|
||||
```css
|
||||
/* Fade in on scroll */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.animate-on-scroll.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Smooth hover */
|
||||
.card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ ACTION ITEMS
|
||||
|
||||
### Immediate (Today):
|
||||
- [x] Fix deployment errors
|
||||
- [x] Archive obsolete docs
|
||||
- [x] Add .dockerignore
|
||||
- [ ] Test deployment succeeds
|
||||
|
||||
### This Week:
|
||||
- [ ] Implement code splitting
|
||||
- [ ] Configure manual chunks
|
||||
- [ ] Add route-based rendering
|
||||
- [ ] Test bundle sizes
|
||||
|
||||
### Next Week:
|
||||
- [ ] Add admin animations (framer-motion)
|
||||
- [ ] Add public animations (CSS)
|
||||
- [ ] Implement scroll animations
|
||||
- [ ] Performance audit
|
||||
|
||||
### Ongoing:
|
||||
- [ ] Enable all Directus features
|
||||
- [ ] Add backend services
|
||||
- [ ] Monitor bundle sizes
|
||||
- [ ] Optimize as needed
|
||||
|
||||
---
|
||||
|
||||
**Result**: Fast public site + Feature-rich admin dashboard! 🚀
|
||||
Reference in New Issue
Block a user