Feature and its Use Cases
Description
Currently, OrgExplorer eagerly imports all page components inside App.jsx (e.g., HomePage, OverviewPage, ContributorProfilePage, etc.). Because of this, Vite bundles the entire application into a single massive JavaScript chunk.
If you run npm run build, Vite actually throws a warning about this:
(!) Some chunks are larger than 500 kB after minification. Consider using dynamic import() to code-split the application.
By implementing React's lazy() and Suspense for our route components, we can split the application into smaller chunks. This will drastically reduce the initial load time, as users will only download the JavaScript for the specific page they are visiting (e.g., the Home Page) rather than downloading the code for the analytics dashboards and charts before they even need them.
Expected Behavior
- Replace static imports in
App.jsx with React.lazy(() => import('./pages/...')).
- Wrap the
<Routes> (or individual routes) in a <Suspense> boundary with a fallback loading indicator (we can reuse the existing Spinner component).
- Running
npm run build should no longer throw the >500kB chunk size warning, and the build output should show multiple smaller .js chunks instead of one giant one.
Impact
High - Directly improves the initial page load speed and core web vitals for all users.
Additional Context
No response
Code of Conduct
Feature and its Use Cases
Description
Currently,
OrgExplorereagerly imports all page components insideApp.jsx(e.g.,HomePage,OverviewPage,ContributorProfilePage, etc.). Because of this, Vite bundles the entire application into a single massive JavaScript chunk.If you run
npm run build, Vite actually throws a warning about this:By implementing React's
lazy()andSuspensefor our route components, we can split the application into smaller chunks. This will drastically reduce the initial load time, as users will only download the JavaScript for the specific page they are visiting (e.g., the Home Page) rather than downloading the code for the analytics dashboards and charts before they even need them.Expected Behavior
App.jsxwithReact.lazy(() => import('./pages/...')).<Routes>(or individual routes) in a<Suspense>boundary with a fallback loading indicator (we can reuse the existingSpinnercomponent).npm run buildshould no longer throw the >500kB chunk size warning, and the build output should show multiple smaller.jschunks instead of one giant one.Impact
High - Directly improves the initial page load speed and core web vitals for all users.
Additional Context
No response
Code of Conduct