[🐛 Bug]: Frontend dev environment is consuming a lot of resources

[Matvey-Kuk]

I'm using Mac Air M2 with 16 GB of memory. I launch dev frontend using "npm run dev":

1. Incidents page load takes up to a minute.
2. Next is consuming 6GB of memory.

I remember frontend building blazing fast a year ago, wonder why exactly it got so resource-greedy.

[Matvey-Kuk]

/bounty 50

[algora-pbc[bot]]

💎 $50 bounty • Keep (YC W23)

Steps to solve:

1. Start working: Comment /attempt #3448 with your implementation plan
2. Submit work: Create a pull request including /claim #3448 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to keephq/keep!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🔴 @Ayushjhawar8	Feb 14, 2025, 1:59:19 AM	WIP
🟢 @hunxjunedo	Feb 14, 2025, 5:41:32 AM	WIP
🟢 @MayorChristopher	Mar 31, 2025, 10:15:42 PM	WIP

[dosubot[bot]]

To address the high resource consumption in the frontend development environment, consider the following:

1. Check Recent Changes: Investigate any recent updates or changes in the frontend codebase or dependencies that might have increased resource usage. This could include new features, libraries, or updates to existing packages.

2. Optimize Development Settings: Review and adjust development environment configurations that could impact performance. For example, ensure that logging levels are set appropriately and that unnecessary debugging features are disabled.

3. Monitor Dependencies: Examine the dependencies used in the project for any recent updates that might contribute to increased memory usage. Sometimes, newer versions of libraries can introduce performance issues.

4. System Resources: Ensure that your system's resources are not being overutilized by other applications, which could affect the performance of the development environment.

5. Performance Profiling: Use performance profiling tools to identify bottlenecks in the application. This can help pinpoint specific areas of the code that are consuming excessive resources.

These steps can help identify and mitigate the issues causing high resource consumption in the frontend development environment.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other | Bug Report}

[Ayushjhawar8]

/attempt #3448

Algora profile	Completed bounties	Tech	Active attempts	Options
@Ayushjhawar8	6 bounties from 1 project	TypeScript, Python, JavaScript & more		Cancel attempt

[hunxjunedo]

/attempt #3448

Algora profile	Completed bounties	Tech	Active attempts	Options
@hunxjunedo	20 bounties from 5 projects	TypeScript, MDX, JavaScript		Cancel attempt

[hunxjunedo]

@Matvey-Kuk @talboren what if we ?

• start using turbopack
• lazily import libraries
• remove the eslint and ts checks when running or building ? we already have ci tests for that, and also the test commands

this should be more than enough, but might not be a quick fix. EDIT: I've tested it with turbo, thou the memory is jumping to 4.5gb from 3 gb, however, point to be noted, the build and compilation is now exponentially faster compared to without turbo

[shahargl]

@hunxjunedo do you have experience with such projects?

what's between dev and build? its different scenarios

[hunxjunedo]

Yeah, I've previously optimized a bunch of next.js apps. I think we only need to optimize for dev, build is supposed to take time and run all the checks. On the other hand in the dev run we can skip unnecessary checks, also given the fact that turbo is only available for dev right now.

[hunxjunedo]

I'd like to get assigned, so I don't work in a hurry and take my time.

[talboren]

I'd like to get assigned, so I don't work in a hurry and take my time.

You got it :)

[shahargl]

@hunxjunedo any news on that?

[hunxjunedo]

Hey @shahargl , I've been a bit busy lately, had some important work and couldn't get time to plan the approach. My general observations are that this is more about the components than the framework, using turbo will improve the speed, however the ram consumption can only be reduced by optimizing the components and modules, plus adopting good practices (bad code is more responsible here than anything, sharing some observations shortly). Having said that, I'd also like to add that I won't be carrying this forward, firstly because the bounty amount isn't a fair compensation, and secondly because this is a gradual fix, which would be better done in the long-run instead of a single PR.

[MayorChristopher]

Frontend dev will be really interesting, if you will allow me to try it, i don't mind. I believe if it works out, the payment wont be a problem, even if small, but the company grows. /attempt #3448

Options

• Cancel my attempt

[volovikariel]

Is this still an issue?

With the default setup, it takes up 3GB of memory as opposed to 6GB

Additionally, though the initial load of localhost:3000/incidents was quite slow (>45 seconds) subsequent ones take 2 seconds.

I would be happy to look into speeding it up, but I want to confirm that it's still an issue.

[Omar8345]

@Matvey-Kuk please respond

[Matvey-Kuk]

@Omar8345 I'm not maintaining the repo anymore, I assume Shahar will respond once he has any comments

[shahargl]

@Omar8345 closing this issue. if this is something bothers you - please create a new ticket with the context / reach out on Slack.