refactor: convert page imports to React.lazy with Vite build-time res…#2162
Merged
Conversation
…toration Replace eager static imports with React.lazy() across entry.tsx, routers/index.tsx, and App.tsx to reduce initial module loading in dev. Add two Vite plugins: - vite-plugin-dev-locale: loads only the active locale in serve mode to eliminate redundant language file requests - vite-plugin-lazy-eager: restores React.lazy back to static imports during build so prod bundles remain unaffected
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (19)
📝 WalkthroughWalkthroughAdds two Vite plugins for single-locale dev builds and lazy-to-eager production conversion, wires them into vite.config.ts, and converts route component imports across App.tsx, routers/index.tsx, and 13 page entry files to React.lazy with Suspense fallbacks. Also updates i18n.ts for dev-mode locale override. ChangesRoute-level code splitting and locale plugin infrastructure
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant Router as routers/index.tsx
participant Suspense as React.Suspense
participant Lazy as React.lazy component
participant Browser
Router->>Suspense: render Switch inside Suspense
Suspense->>Lazy: trigger dynamic import
Suspense-->>Browser: show Spin fallback
Lazy-->>Suspense: resolve component module
Suspense-->>Browser: render resolved route component
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors route/page wiring to reduce Vite dev-server ESM request volume by switching many page imports to React.lazy() (so modules load on-demand in dev), while adding Vite build-time transforms to restore eager/static imports for production builds.
Changes:
- Convert many route/page component imports (routers, App, and page
entry.tsxfiles) toReact.lazy()and wrap routing withReact.Suspensefallbacks. - Add
vite-plugin-dev-locale(serve-only) to load only the active locale in dev, and alignsrc/i18n.tsdev language selection withVITE_DEV_LOCALE. - Add
vite-plugin-lazy-eager(build-only) to rewriteReact.lazy(() => import(...))patterns back to static imports duringvite build.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Registers the new dev/build Vite plugins to optimize dev requests while keeping prod behavior. |
| src/routers/index.tsx | Converts route components to React.lazy() and adds a Suspense boundary around the router switch. |
| src/pages/notificationTemplates/entry.tsx | Lazily imports the page component from an eagerly-loaded entry module. |
| src/pages/notificationRules/entry.tsx | Lazily imports List/Add/Edit/Detail components from an eagerly-loaded entry module. |
| src/pages/notificationChannels/entry.tsx | Lazily imports List/Add/Edit components from an eagerly-loaded entry module. |
| src/pages/metricsBuiltin/entry.tsx | Lazily imports the List component from an eagerly-loaded entry module. |
| src/pages/logExplorer/entry.tsx | Lazily imports the page root to avoid pulling heavy dependencies at startup in dev. |
| src/pages/hosts/entry.tsx | Lazily imports the List component from an eagerly-loaded entry module. |
| src/pages/eventPipeline/entry.tsx | Lazily imports multiple route components from an eagerly-loaded entry module. |
| src/pages/embeddedProduct/entry.tsx | Lazily imports List/Detail components from an eagerly-loaded entry module. |
| src/pages/embeddedDashboards/entry.tsx | Lazily imports the page component from an eagerly-loaded entry module. |
| src/pages/contacts/entry.tsx | Lazily imports the List component from an eagerly-loaded entry module. |
| src/pages/builtInComponents/entry.tsx | Lazily imports multiple route components from an eagerly-loaded entry module. |
| src/pages/alertCurEvent/entry.tsx | Lazily imports the List component from an eagerly-loaded entry module. |
| src/pages/aiConfig/entry.tsx | Lazily imports multiple route components from an eagerly-loaded entry module. |
| src/i18n.ts | Forces dev language selection to match VITE_DEV_LOCALE so dev-only single-locale loading stays consistent. |
| src/App.tsx | Lazily loads a few top-level route components and wraps the router in Suspense. |
| plugins/vite-plugin-lazy-eager.ts | Build-only transform to rewrite specific React.lazy(import()) patterns back to static imports. |
| plugins/vite-plugin-dev-locale.ts | Serve-only transform to stub out non-active locale imports in locale index modules. |
Comment on lines
+5
to
+7
| * 背景：dev 下 Vite 原生 ESM「一个模块一个请求」，路由/页面若全部静态 import 会在登录页 | ||
| * 就拉起数千个模块。改为 React.lazy 后 dev 只按需加载。但生产已由 Rollup 打包，不存在 | ||
| * 「多请求」问题，业务希望产物保持懒加载改造前的形态（无额外按需 chunk、无路由级 Suspense）。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…toration
Replace eager static imports with React.lazy() across entry.tsx, routers/index.tsx, and App.tsx to reduce initial module loading in dev.
Add two Vite plugins:
Summary by CodeRabbit
New Features
Bug Fixes