AOSSIE-Org / AOSSIE-Org/OrgExplorer

[FEATURE]: Implement Code Splitting and Dynamic Routing to optimize Vite bundle size

オープン 初心者向け
#140 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
JavaScript
スター
34
フォーク
92
平均マージ
8日 7時間
マージ済み PR(30日)
12

説明

### 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 `` (or individual routes) in a `` 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

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates
- [x] I am ready to open a pr on this issue

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start in App.jsx, where HomePage, OverviewPage, ContributorProfilePage and other route components are currently imported eagerly. Replace those route imports with React.lazy imports and add a Suspense boundary using the existing Spinner component as the fallback. Run npm run build before and after; done means the >500kB chunk warning is gone and the output shows multiple smaller JavaScript chunks.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react, vite
領域
frontend, performance
issue の種類
機能追加
難易度
2/5
見積もり時間
1〜3時間
活発さ
活発
明瞭さ
明確に書かれている
初心者へのやさしさ
78/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。