Holistic performance

Holistic React + Vite Audit

This skill collects signals for heavy dependencies, whole-package imports, images without dimensions, large assets, CSS, and dynamic imports. It does not measure Web Vitals or claim that replacing a library improves the application. Results are advisory (action: review) and must be confirmed with a build and browser measurements.

Memory and patterns

Read the local MEMORY.md and follow ../.shared/SKILL-MEMORY-PROTOCOL.md; use node "<skills-root>/.shared/src/memory-cli.js" append ... for actionable results. The utility validates, renumbers, and retains up to 12 entries.

Before making decisions influenced by existing code, follow ../.shared/PATTERN-LEARNING-PROTOCOL.md and query the repository catalog with node "<skills-root>/.shared/src/pattern-learning/pattern-cli.js" query ...; after confirming a new or refined pattern in the code, consolidate it with node "<skills-root>/.shared/src/pattern-learning/pattern-cli.js" upsert ....

Compatibility

Compatible with React 18/19, Vite 7/8, and Node 22.13+. Run from the project root:

node "<skill-dir>/scripts/perf-audit.js" ./app --format json --dry-run
node "<skill-dir>/scripts/perf-audit.js" ./app --output ./validation-results/holistic --force

The auditor continues when package.json or vite.config is missing, records that limitation, and includes detected versions (react, vite, node) and paths to valid sub-audits in validation-results/**/*.json. Output behavior follows the shared CLI contract in ../.shared/README.md.

When not to use

• A specific bottleneck is already identified (re-renders, Context, bundle, list rendering); go directly to the corresponding skill.
• Field data already isolates the regression; skip the static triage and validate the fix.

Reproducible process

1. Record the commit, lockfile, Node, React, Vite, browser, network, viewport, and dataset.
2. Run the static audit and classify each signal by route and criticality.
3. Produce a production build; compare raw, gzip, and Brotli bytes, requests, parse and execution time, and memory.
4. Measure LCP, INP, CLS, and FCP in at least three batches with cold and warm caches clearly identified.
5. Change one hypothesis at a time (selective import, compression, dimensions, or lazy loading) and repeat the same scenario. If the metric does not change, record “no measurable gain.”

Safe interpretation

• A declared heavy dependency is not necessarily in the initial chunk; confirm it in the bundle.
• import() of a heavy dependency is a candidate for on-demand loading, but it needs fallback, error handling, and accessibility.
• Images need stable dimensions to reduce CLS; do not remove dimensions to “optimize.” A small SVG or font below the threshold is not an error.
• React.lazy must load modules with a default export inside Suspense; do not apply lazy loading everywhere, because requests and loading states also have a cost.
• The auditor does not infer animations or Web Vitals from text. Use Performance, Profiler, Lighthouse, and real data.
• Third-party origins and critical assets are candidates for React DOM resource hints (prefetchDNS, preconnect, preload, preloadModule, preinit); confirm the target is genuinely critical before hinting.
• Third-party or legacy script tags without defer or async block parsing; defer preserves execution order and async suits independent scripts. Vite's module entry is already non-blocking.
• Hoist large static JSX, especially SVG, to module scope to avoid re-creation per render; with React Compiler enabled this hoisting is automatic.

Limitations

Alias imports, dynamic configuration, actual size after tree shaking, CDN, caching, and server behavior may be outside the scanner's reach. The report contains no gain percentages: any timing conclusion must come from measured artifacts.

Files

• scripts/perf-audit.js: scanner and sub-audit aggregator.
• checklists/holistic-checklist.md: baseline, change, and validation protocol.
• examples/before and examples/after: equivalent examples; the PDF and chart load on demand with fallbacks.