epam / epam/statgpt-admin-frontend

[Perf Improvement] No Explicit Bundle Analysis or Code Splitting Strategy

Open
#211 0 comments 0 reactions 0 assignees View on GitHub
perf
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.