codeflash-ai/codeflash-internal
1
0
Fork 0
Code Issues Pull requests 33 Projects Releases Packages Wiki Activity Actions 756
codeflash-internal/js/cf-webapp/proof/13-dynamic-import-line-profiler.md
Kevin Turcios 67ec032429
perf: dynamic-import LineProfilerView to defer prism-react-renderer (#2557) 
## Summary
- Replaces static import of `LineProfilerView` with `next/dynamic` +
`ssr: false`
- Defers loading of `prism-react-renderer` (~100KB+) until user
navigates to profiler tab
- Adds `<Skeleton>` loading fallback for smooth UX

## Evidence
- Proof doc: `js/cf-webapp/proof/13-dynamic-import-line-profiler.md`

## Test plan
- [ ] `bash
js/cf-webapp/proof/reproducers/13-dynamic-import-line-profiler.sh` — 7/7
checks pass
- [ ] `npm run build` succeeds
- [ ] Profiler page loads and renders LineProfilerView correctly
2026-04-04 11:36:59 -05:00

1.2 KiB
Raw Blame History

Proof 13: Dynamic-import LineProfilerView

What Changed

  • Replaced static import of LineProfilerView with next/dynamic in the profiler page
  • Added ssr: false since the component uses browser-only APIs
  • Added <Skeleton> loading fallback

Why

LineProfilerView depends on prism-react-renderer, which pulls in Prism.js grammar definitions (~100KB+). By using next/dynamic with ssr: false:

  • The profiler page's initial JS bundle shrinks — Prism grammars are loaded on-demand
  • The component only loads when the user navigates to the profiler tab, not on initial page load
  • SSR is skipped for a component that relies on client-side rendering anyway

Evidence

Before (static import)

import { LineProfilerView } from "@/components/LineProfiler"

After (dynamic import)

import dynamic from "next/dynamic"
import { Skeleton } from "@/components/ui/skeleton"

const LineProfilerView = dynamic(
  () => import("@/components/LineProfiler").then(mod => mod.LineProfilerView),
  {
    ssr: false,
    loading: () => <Skeleton className="h-full w-full" />,
  },
)

How to Verify

cd js/cf-webapp
bash proof/reproducers/13-dynamic-import-line-profiler.sh