-
[OPIK-6179] [FE] perf: lazy-load DatasetExportPanel
frostbyte_neo 发布于
2026-04-23 15:36:13 +00:00 DatasetExportPanel was imported statically at the top of v1/App.tsx
and v2/App.tsx. Its transitive dependency graph compiles to a ~980 KB
gzipped chunk (4.4 MB decoded), which was a required static dep of
the App chunk on every page load — including the get-started page
where the export feature is never used.Wrap the import in React.lazy() and add a Suspense boundary with
fallback={null}. The panel already returns null when there are no
active export jobs, so the fallback matches its idle state — no UI
change. App can now parse and execute immediately without waiting for
the 4.4 MB of export-panel transitive deps to link up.Measured on prod (https://www.comet.com/, verified cold signup flow):
- exportJobHelpers-*.js: 980 KB gzip, blocks App execution today
- On healthy network: 607 ms parallel download with App chunk
- On bad-network anomaly run: 17,496 ms — blocks everything
After this change the chunk is dynamically imported — fetched in
parallel, does NOT block React mount or first paint.
Semantic tradeoff: on the rare path where a user reloads mid-export,
the progress panel reappears ~500-1000 ms later (after its chunk
arrives) instead of synchronously at App mount. Every other flow is
unchanged.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
下载附件