epam / epam/statgpt-admin-frontend
[Perf Improvement] No Explicit Bundle Analysis or Code Splitting Strategy
- Dominant language
- TypeScript
- Stars
- 18
- Forks
- 0
- Avg merge
- 15h 5m
- Merged PRs (30d)
- 19
Description
### StatGPT Admin Frontend version
0.4.5
### What is the problem this feature will solve?
- **Where:** `next.config.js` and `package.json` build scripts
- **Why:** No evidence of bundle analysis tooling (e.g., `@next/bundle-analyzer`, `bundle-visualizer`), dynamic imports, or route-level code splitting beyond Next.js defaults. Large libraries like `@monaco-editor/react` (4.7.0), `ag-grid-react` (34.1.0), and `react-dnd` are likely bundled on the critical path.
- **Impact:** Larger initial JS bundle → slower FCP (First Contentful Paint), higher time-to-interactive, especially on slow networks.
- **Confidence:** High
### What is the feature you are proposing to solve the problem?
**Fix:**
1. **Add bundle analyzer** to build pipeline:
```bash
npm install --save-dev @next/bundle-analyzer
```
Update `next.config.js`:
```javascript
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer(nextConfig);
```
Run: `ANALYZE=true npm run build`
2. **Lazy-load Editor component** (Monaco is heavy):
```typescript
const Editor = dynamic(() => import('@/src/components/Editor'), { loading: () => });
```
3. **Split heavy grid UI** by route (e.g., load GridView only on data-sets/channels pages).
**Validate:**
- Run bundle analyzer, identify >100KB chunks.
- Check Network tab in DevTools: `_app.js` and `_document.js` should be < 200KB combined.
- Use Lighthouse to measure FCP before/after.
### What alternatives have you considered?
_No response_
Contributor guide
Research direction
Start with next.config.js and the package.json build scripts, then run ANALYZE=true npm run build to inspect the current bundles. Trace the Editor component and the data-sets/channels pages to identify where heavy UI is loaded. Done means analyzer support is available, heavy components are split as proposed, and bundle or Lighthouse measurements show the intended improvement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- build-system, frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100