My project got pretty slow

I migrated my whole project to app folder, trpc, prisma, chakra-ui. The development got pretty slow, every dev has the newest m1 macbooks with 32gb ram. Are there any patterns that we should avoid? Should we seperate types somehow to make the performance better? Any tips are welcome. We are using t3stack starter
25 Replies
Rhys
Rhys2y ago
Slow isn’t specific you need to be clearer about the problem is If it’s ESLint you may have lint rules that take a while to run If it’s typescript updating then you may be doing a lot with zod schema extends, omit, etc
Jaaneek
Jaaneek2y ago
Mostly typescript is pretty slow, the project as a whole is also slow. Redirects take few seconds @Rhys . What other information can I provide to make it clearer?
barry
barry2y ago
That's just nextjs being slow on dev server
Jaaneek
Jaaneek2y ago
But its absurdly slow, the types are taking 2-10 seconds to change, the redirects are also taking that much. Are there any tricks I can do? Will that change soon?
barry
barry2y ago
🤷
Jaaneek
Jaaneek2y ago
I’m doing a lot of that, what can I do about it? Can I somehow optimise it? Follow up question @Rhys @barry Can it be because I have huge routers? More than 20 endpoints in single endpoint, do you think splitting into more modules could fix that?
jingleberry
jingleberry2y ago
When you say you migrated to app router, how exactly did you do that? Did you just copy paste the code over? One hypothesis is that your data fetching setup might be causing every page load to be very slow If every request requires 20 queries to resolve then I guess that’s a bottleneck
Jaaneek
Jaaneek2y ago
When I deploy/build it it works wonderful, the redirects are instant. The only problem is dev enviroment, the typescript, eslint and redirects are slow as hell
Hycord | @ When Replying
I have a project like that and it’s faster for me to build for production and run it every time than dealing with inconsistent restarts
Jaaneek
Jaaneek2y ago
So you build it with every change you make?
Perfect
Perfect2y ago
Sounds to me like a next dev server issue and maybe a mix of your typescript. I would stick with pages folder until app is stable and recommended to be used.
Jaaneek
Jaaneek2y ago
What could I potentially do in the terms of "mix of your typescript"? Can I optimize it somehow? As I said I do a lot of advanced typescript + I have huge trpc routers
Perfect
Perfect2y ago
That’s a good question, seems like you are better than me at TS so I really wouldn’t know. Not sure about trpc. Maybe try eliminating things Like rule out eslint by disabling and testing Once you actually know why it’s so slow, then you can try to fix whatever it is. My gut feeling says it’s not typescript.
Hycord | @ When Replying
Yeah but it’s not a web app, it’s a backend project using TS.
Jaaneek
Jaaneek2y ago
Nothing helped, I'm still open to any suggestions! 😄
arcanereinz
arcanereinz2y ago
last time i got a slow server was because i wasn't using tree-shaking on material-ui so when someone imported icons it bloated the bundle. How big are your bundles? Did you check if anything is re-rendering too many times especially near the root of the vdom?
Jaaneek
Jaaneek2y ago
Rerenders seem to be okay Is there any good way to check that? Any tools? How did you approach it?
arcanereinz
arcanereinz2y ago
If you can find a point where your code became slow you can check the git commands and narrowed down when that happened that's what I did. If you're on mac/linux you can run du -sh * in node_modules to see which library is the taking up more space. Then just going through the code to make sure you're tree-shaking as much as possible. Maybe lighthouse in chrome to narrow down which page is slow. I haven't research on any tools since I didn't need to at the time but probably a good idea to take a look. You can try disable source mapping to see if that speeds anything up.
Jaaneek
Jaaneek2y ago
My code got instantly slower when I migrated to trpc, prisma & app folder. The typescript and browser is only slow on development, on prod it's fast as lighting Update: Everyone on our team disabled Eslint and now the dev enviroemnt is working fast again! The sad thing is that we do not have the autofix anymore and we have to enable it before making pull requests to ensure the CI/CD will pass. Does anyone know why eslint would slow it so much down? Turns out this is most probably eslint issue, do you happen to know how we might fix it?
isaac_way
isaac_way2y ago
there are probably certain rules that are causing the slowdown, if you can identify and disable those that could fix it... probably some rules related to typescript
Jakub
Jakub2y ago
If the cause is eslint, do you guys have any tips to speed it up? Config changes, i've heard that typescript-eslint takes a huge performance hit, any alternatives/settings rewrite that could help?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
alonmiz
alonmiz11mo ago
having the same issue, i've even narrowed down to where eslint completely chokes
api.audit
// when reaching this line and column, eslint can even shut down from overloading. to be able to continue to get to the actions (mutations, queries)
.search.useQuery({ organizationId: orgId })
api.audit
// when reaching this line and column, eslint can even shut down from overloading. to be able to continue to get to the actions (mutations, queries)
.search.useQuery({ organizationId: orgId })
using TRPC + zod + app router + drizzle does anyone have an idea how to alleviate those crazy performance issues? my eslint config. trying to narrow which plugin is causing the issues i was able to target these 2
extends: [
'plugin:@next/next/recommended',
'plugin:@typescript-eslint/recommended-type-checked',
'next/core-web-vitals',
'prettier',


// causing performance issues
'plugin:@typescript-eslint/stylistic-type-checked',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
extends: [
'plugin:@next/next/recommended',
'plugin:@typescript-eslint/recommended-type-checked',
'next/core-web-vitals',
'prettier',


// causing performance issues
'plugin:@typescript-eslint/stylistic-type-checked',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
Rhys
Rhys11mo ago
You could use arktype instead of zod and onyx/biomejs for linting
ethan
ethan11mo ago
does biome support plugins yet?
Want results from more Discord servers?
Add your server