perf(docs): drop mermaid-vendor from preload, coalesce lucide chunks#1689
Conversation
mermaid-vendor is ~700 KB gzipped — by far the largest chunk on the
docs site, accounting for ~60% of the cold-load payload. The Mermaid
wrapper component already loads the library via `import('mermaid')`
(dynamic), so the chunk only needs to load on doc pages that actually
render a `mermaid` code block.
Rolldown adds dynamic chunks to the entry HTML's modulepreload list
regardless, so every cold visit downloads mermaid-vendor whether the
page uses it or not. Use `build.modulePreload.resolveDependencies` to
filter mermaid-vendor out of the preload graph; the dynamic import
still resolves on demand when a diagram renders. Net effect: cold load
drops from ~1.2 MB to ~430 KB on diagram-free pages.
Also bundle `lucide-react` icons into a single `lucide-vendor` chunk.
Before this each statically-imported icon got its own ~5 KB chunk,
producing ~30 modulepreload links and the same number of HTTP/2
streams on cold load. One chunk compresses better and shortens the
critical request waterfall.
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Summary
Cuts the docs cold-load payload by ~60% (from ~1.2 MB compressed to ~430 KB) on pages that don't use Mermaid diagrams.
Measured on the live deployment after enabling Caddy compression:
mermaid-vendor alone is over half the cold load. Removing it gets us under 450 KB.
Changes
1. Strip
mermaid-vendorfrom the preload graphThe
Mermaidwrapper component already lazy-loads the library viaimport('mermaid'), so the chunk should only load when a doc page actually contains amermaidcode block. But Rolldown adds dynamic chunks to the entry HTML's<link rel="modulepreload">list regardless, forcing every cold visit to download mermaid-vendor whether the page uses it or not.Use
build.modulePreload.resolveDependenciesto filter mermaid-vendor out of the preload list. The dynamic import still resolves on demand when a diagram renders — net effect: pages without diagrams skip the 719 KB download entirely; pages with diagrams pay the same cost as before.2. Coalesce lucide-react icons into one chunk
Before this change, each statically-imported lucide icon shipped as its own ~5 KB chunk. The cold-load HTML had ~30 individual
<link rel="modulepreload">lines for them (arrow-left,arrow-right,bot,check,chevron-down, ...). Bundling them into a singlelucide-vendorchunk:Pre-PR checklist
bun run check— not run by author; please verify locallyservices/platform/messages/{en,de,fr}.json— N/A (no UI strings changed)/docs/{en,de,fr}/— N/A (build infra only)bun run --filter @tale/docs lintandbun run --filter @tale/docs test— not run by author; please verify locallyREADME.mdand translations — N/ATest plan
/docs/): confirmmermaid-vendor-*.jsis not in the cold-load network waterfall and is not in the<link rel="modulepreload">list. Total transferred bytes for the doc HTML + its preloaded chunks should be ~430 KB compressed.mermaid-vendor-*.jsis fetched lazily once the diagram component mounts, and the diagram renders correctly.lucide-vendor-*.jschunk in the asset directory; no individual icon chunks.