perf-bundle-edge

Name: perf-bundle-edge
Availability: InStock
Author: aaron

Optimize PANaCEa frontend performance via code-splitting, lazy-loading, and KV caching.

Updated Nov 16, 2025

Search Tags:#performance #cloudflare #prisma #lazy-loading #code-splitting #edge-functions #bundle-size

Ready to run

npx skills add https://github.com/aaronjullger-lgtm/PANaCEa --skill perf-bundle-edge

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: perf-bundle-edge
Source: https://github.com/aaronjullger-lgtm/PANaCEa/tree/main/.claude/skills/perf-bundle-edge
Command: npx skills add https://github.com/aaronjullger-lgtm/PANaCEa --skill perf-bundle-edge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PANaCEa must load fast on student laptops and respect Cloudflare CPU time limits. Frontend bundle size, Prisma connection management, and code splitting are critical for a snappy, scalable exam prep platform.

Core Features & Use Cases

Heavy dependency lazy-loading (Three.js, Recharts) to reduce initial bundle size and improve route load times.
Vite build analysis and route-level code splitting to ensure components load on demand.
Edge function best practices (Prisma edge client lifecycle, KV caching, and chunk optimization) for lower latency and cost.

Quick Start

Audit the app to identify the heaviest bundles and implement route-based lazy loading for heavy dependencies, then profile edge functions to reduce cold start time.

Frequently Asked Questions about perf-bundle-edge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce bundle size by lazy-loading heavy dependencies like Three.js and Recharts?▼

Reduce bundle size by implementing route-based lazy loading for heavy dependencies like Three.js and Recharts, ensuring components load on demand during navigation rather than inflating the initial payload.

How do I manage Prisma edge client lifecycle to stay within Cloudflare CPU time limits?▼

Manage Prisma edge client lifecycle by applying proper edge lifecycle management and KV caching techniques, which reduces edge function latency and prevents cold starts from exceeding Cloudflare CPU time limits.

What is route-based code splitting and how does it improve Vite build performance?▼

Route-based code splitting is a Vite build analysis technique that divides your application into smaller chunks, ensuring components load on demand to optimize route load times and reduce initial bundle size.

Does this approach work for optimizing frontend performance on low-powered student laptops?▼

Yes, optimizing bundle size through code splitting and lazy-loading directly improves load times and performance on low-powered student laptops by minimizing the initial JavaScript payload.

What's the best way to audit and identify the heaviest bundles in my frontend application?▼

The best way to identify the heaviest bundles is performing a Vite build analysis to audit the application, allowing you to pinpoint heavy dependencies and implement effective route-level code splitting.