7.2 KiB
Recommended Vite & Astro Plugins for Spark Platform
🎯 Platform Context
Spark is a content generation and SEO platform with:
- Multi-site management
- Visual block editor
- Admin dashboard
- Automated content generation
- SEO optimization tools
- Geospatial intelligence
🔥 High Priority - Install These First
1. Bundle Analysis & Optimization
rollup-plugin-visualizer
Why: See what's making your bundles large, optimize load times
npm install -D rollup-plugin-visualizer
Config (astro.config.mjs):
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
vite: {
plugins: [
visualizer({
open: true,
gzipSize: true,
brotliSize: true,
})
]
}
});
Use case: Your admin dashboard has heavy components (React Flow, Tremor charts, Leaflet maps). This shows which libraries are bloating the bundle.
vite-plugin-compression
Why: Compress assets for faster loading
npm install -D vite-plugin-compression
Config:
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
vite: {
plugins: [
viteCompression({
algorithm: 'brotliCompress',
ext: '.br',
})
]
}
});
Use case: Generated articles and admin pages load faster with pre-compressed assets.
2. SEO & Performance
@astrojs/sitemap
Why: Auto-generate sitemaps for all your generated sites
npm install @astrojs/sitemap
Config:
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://launch.jumpstartscaling.com',
integrations: [sitemap()]
});
Use case: Essential for SEO platform - generates XML sitemaps for all generated content.
astro-seo
Why: Better SEO meta tags management
npm install astro-seo
Usage:
---
import { SEO } from 'astro-seo';
---
<SEO
title="Generated Article Title"
description="Meta description from Directus"
openGraph={{
basic: {
title: "Article Title",
type: "article",
image: "/og-image.jpg",
}
}}
/>
Use case: Programmatically set SEO tags for thousands of generated articles.
3. Image Optimization
@astrojs/image (or astro-imagetools)
Why: Optimize images for generated content
npm install @astrojs/image
Config:
import image from '@astrojs/image';
export default defineConfig({
integrations: [
image({
serviceEntryPoint: '@astrojs/image/sharp'
})
]
});
Use case: Optimize featured images for generated articles, compress avatar images.
4. Development Experience
vite-plugin-inspect
Why: Debug Vite's transformation pipeline
npm install -D vite-plugin-inspect
Config:
import Inspect from 'vite-plugin-inspect';
export default defineConfig({
vite: {
plugins: [Inspect()]
}
});
Use case: Debug issues with React Flow, Craft.js, or other complex components.
🎨 Medium Priority - Enhance User Experience
5. PWA Support
@vite-pwa/astro
Why: Make admin dashboard work offline
npm install -D @vite-pwa/astro
Config:
import AstroPWA from '@vite-pwa/astro';
export default defineConfig({
integrations: [
AstroPWA({
registerType: 'autoUpdate',
manifest: {
name: 'Spark Admin',
short_name: 'Spark',
theme_color: '#1e293b',
}
})
]
});
Use case: Admins can work on campaigns even with poor internet connection.
6. Icons
unplugin-icons
Why: Use any icon set without importing SVGs
npm install -D unplugin-icons @iconify/json
Config:
import Icons from 'unplugin-icons/vite';
export default defineConfig({
vite: {
plugins: [
Icons({
compiler: 'astro',
})
]
}
});
Usage:
---
import IconMap from '~icons/lucide/map';
---
<IconMap />
Use case: Consistent icons across admin dashboard without manual SVG management.
7. Environment Variables
vite-plugin-environment
Why: Better env var management
npm install -D vite-plugin-environment
Use case: Manage different configs for multi-site deployments.
📊 Analytics & Monitoring
8. Web Vitals Tracking
vite-plugin-web-vitals
Why: Monitor Core Web Vitals
npm install -D vite-plugin-web-vitals
Use case: Track performance of generated sites for SEO optimization.
9. Error Tracking
@astrojs/partytown
Why: Run analytics scripts in web worker (faster page load)
npm install @astrojs/partytown
Config:
import partytown from '@astrojs/partytown';
export default defineConfig({
integrations: [
partytown({
config: {
forward: ['dataLayer.push'],
}
})
]
});
Use case: Add Google Analytics to generated sites without slowing them down.
🔧 Advanced Features
10. API Routes Enhancement
vite-plugin-api
Why: Better API route handling
npm install -D vite-plugin-api
Use case: Enhance /api/generate-content and other content generation endpoints.
11. Markdown Processing
@astrojs/mdx
Why: Use MDX for rich content
npm install @astrojs/mdx
Use case: Allow markdown with React components in generated articles.
12. Database Integration
astro-db (Astro Studio)
Why: Built-in database for Astro
npm install @astrojs/db
Use case: Cache generated content, store analytics data locally.
🚀 Performance Optimization
13. Code Splitting
vite-plugin-dynamic-import
Why: Better code splitting control
npm install -D vite-plugin-dynamic-import
Use case: Lazy load heavy components (React Flow, Tremor charts) only when needed.
14. CSS Optimization
vite-plugin-purge-css
Why: Remove unused CSS
npm install -D vite-plugin-purge-css
Use case: Reduce CSS bundle size for generated sites.
🎯 Spark-Specific Recommendations
Top 5 to Install Right Now:
rollup-plugin-visualizer- See what's bloating your bundles@astrojs/sitemap- Essential for SEO platformvite-plugin-compression- Faster page loads@astrojs/image- Optimize generated content images@vite-pwa/astro- Offline-capable admin dashboard
Installation Command:
cd frontend
npm install -D rollup-plugin-visualizer vite-plugin-compression @astrojs/sitemap @astrojs/image @vite-pwa/astro
📝 Next Steps
- Install top 5 plugins (see above)
- Update
astro.config.mjswith plugin configurations - Run build to see bundle analysis
- Optimize based on visualizer output
- Test admin dashboard and generated sites