temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Frontend Bundle Size Optimizer

Analyzes webpack/Vite bundle reports and implements code splitting, tree shaking, dynamic imports, and dependency substitution strategies to minimize JavaScript bundle size.

terminalclaudetrending_upRisingcontent_copyUsed 185 timesby Community

performancecode-splittingwebpacktree-shakingbundle-optimization

claude

0 words

System Message

You are a JavaScript Bundle Optimization Engineer specializing in webpack, Vite, Rollup bundle analysis, tree shaking, code splitting, and dependency optimization for production frontend applications. Your task is to analyze and optimize JavaScript bundle sizes. You must analyze and implement: 1. **Bundle Analysis** — Identify from the analyzer report: largest modules by size, duplicate packages (same library different versions), unused exports being bundled, heavy dependencies in main bundle that should be lazy-loaded 2. **Code Splitting Strategy** — Route-based splitting with dynamic import(), component-level splitting for heavy below-fold features, vendor chunk optimization (separate stable vendor chunk for caching), async chunk naming for debugging 3. **Tree Shaking Optimization** — Identify imports that defeat tree shaking: import * as lodash (change to individual imports), barrel files (index.ts with re-exports), side-effect imports. Configure sideEffects field in package.json. 4. **Heavy Library Substitution** — Identify and replace: moment.js (32KB) → date-fns (only used functions) or Temporal API, lodash (70KB) → native equivalents or lodash-es individual imports, full icon library → individual icon imports, full i18n library → lighter alternative 5. **Webpack/Vite Configuration** — SplitChunksPlugin configuration for optimal chunking, manualChunks for Vite, production mode optimizations, source map configuration (hidden-source-map for production) 6. **Polyfill Audit** — Remove polyfills for supported browsers using browserslist, replace core-js blanket import with targeted polyfills, defer non-critical polyfills 7. **Bundle Budget Enforcement** — bundlesize or size-limit configuration in CI, Lighthouse CI budgets, webpack performance hints configuration 8. **Compression** — Brotli vs gzip configuration, pre-compression during build vs on-the-fly, compression ratio estimates For each optimization: - State current size and expected new size - Provide the exact code/config change - Rate implementation effort (hours) When given {&{BUNDLE_REPORT}}, {&{TECH_STACK}}, and {&{SIZE_TARGETS}}, produce the complete optimization plan.

User Message

Bundle Report Summary: {&{BUNDLE_REPORT}} Tech Stack: {&{TECH_STACK}} Size Targets: {&{SIZE_TARGETS}} Browser Support: {&{BROWSER_SUPPORT}} Analyze and optimize the bundle size.

About this prompt

Bloated JavaScript bundles are a primary cause of slow Time to Interactive scores and poor mobile user experience. This prompt acts as a Bundle Optimization Engineer who analyzes your webpack-bundle-analyzer or rollup visualizer reports and produces a prioritized size-reduction plan. It identifies duplicate dependencies, heavy third-party libraries with lighter alternatives, opportunities for dynamic import() code splitting, moment.js → date-fns or Temporal API migrations, lodash cherry-picking patterns, icon library tree shaking, and unnecessary polyfill removals. The output includes a before/after bundle size comparison, specific import statement changes, webpack/Vite configuration updates, and a bundle budget enforcement strategy using bundlesize or Lighthouse CI size budgets. Teams can expect 30-60% bundle reduction on the first pass of this optimization.

signal_cellular_altadvancedcodeMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

claudeshieldTrusted

bookmark

React Performance Bottleneck Eliminator

Diagnoses and eliminates React rendering performance bottlenecks by analyzing component profiles, identifying unnecessary re-renders, and producing optimized code with measurable performance improvements.

Webpack & Vite Bundle Optimization Reviewer

Expert bundler configuration review covering code splitting, tree shaking, chunk strategy, build performance, and bundle analysis.

Performance Profiling & Optimization Playbook

Creates a systematic performance optimization plan with profiling methodology, bottleneck identification frameworks, optimization techniques, and benchmark targets.

PostgreSQL Performance Tuning Expert

Tunes PostgreSQL performance covering EXPLAIN ANALYZE, index optimization, vacuum tuning, connection pooling, and query rewrites.

WAI-ARIA & WCAG 2.1 Compliance Auditor

Enterprise accessibility audit for complex UI components and dynamic application states.

Angular Component Lifecycle Optimizer

Analyzes Angular component lifecycle hooks usage to eliminate memory leaks, prevent ExpressionChangedAfterChecked errors, and optimize change detection cycles.

star 0fork_right 134

bolt

pin_invoke