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

JJaaneek I migrated my whole project to app folder, trpc, prisma, chakra-ui. The developm...

Rhys•4/5/23, 2:39 AM

Slow isn’t specific you need to be clearer about the problem is

Rhys•4/5/23, 2:40 AM

If it’s ESLint you may have lint rules that take a while to run

Rhys•4/5/23, 2:40 AM

If it’s typescript updating then you may be doing a lot with zod schema extends, omit, etc

JaaneekOP•4/5/23, 8:51 AM

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?

JJaaneek Mostly typescript is pretty slow, the project as a whole is also slow. Redirects...

barry•4/5/23, 9:00 AM

That's just nextjs being slow on dev server

JaaneekOP•4/5/23, 9:01 AM

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•4/5/23, 9:02 AM

RRhys If it’s typescript updating then you may be doing a lot with zod schema extends,...

JaaneekOP•4/5/23, 9:04 AM

I’m doing a lot of that, what can I do about it? Can I somehow optimise it?

JaaneekOP•4/5/23, 11:56 AM

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•4/5/23, 12:07 PM

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

jingleberry•4/5/23, 12:08 PM

If every request requires 20 queries to resolve then I guess that’s a bottleneck

JaaneekOP•4/5/23, 12:09 PM

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•4/5/23, 12:12 PM

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

JaaneekOP•4/5/23, 12:13 PM

So you build it with every change you make?

Perfect•4/5/23, 12:14 PM

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.

JaaneekOP•4/5/23, 12:15 PM

What could I potentially do in the terms of "mix of your typescript"? Can I optimize it somehow?

JaaneekOP•4/5/23, 12:15 PM

As I said I do a lot of advanced typescript + I have huge trpc routers

Perfect•4/5/23, 12:17 PM

That’s a good question, seems like you are better than me at TS so I really wouldn’t know. Not sure about trpc.

Perfect•4/5/23, 12:17 PM

Maybe try eliminating things

Perfect•4/5/23, 12:17 PM

Like rule out eslint by disabling and testing

Perfect•4/5/23, 12:18 PM

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.

JJaaneek So you build it with every change you make?

Hycord | @ When Replying•4/5/23, 12:20 PM

Yeah but it’s not a web app, it’s a backend project using TS.

JaaneekOP•4/5/23, 12:39 PM

Nothing helped, I'm still open to any suggestions!

arcanereinz•4/6/23, 5:40 AM

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?

arcanereinz•4/6/23, 5:43 AM

Did you check if anything is re-rendering too many times especially near the root of the vdom?

Aarcanereinz Did you check if anything is re-rendering too many times especially near the roo...

JaaneekOP•4/6/23, 6:42 AM

Rerenders seem to be okay

Aarcanereinz last time i got a slow server was because i wasn't using tree-shaking on materia...

JaaneekOP•4/6/23, 6:42 AM

Is there any good way to check that? Any tools? How did you approach it?

arcanereinz•4/6/23, 6:48 AM

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 *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.

JaaneekOP•4/6/23, 9:12 AM

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

JaaneekOP•4/6/23, 9:20 AM

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?

PPerfect Like rule out eslint by disabling and testing

JaaneekOP•4/6/23, 9:20 AM

Turns out this is most probably eslint issue, do you happen to know how we might fix it?

isaac_way•4/6/23, 3:27 PM

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•4/6/23, 9:54 PM

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?

alonmiz•12/29/23, 7:25 AM

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',
  ],

Aalonmiz having the same issue, i've even narrowed down to where eslint completely chokes...

Rhys•12/29/23, 8:51 AM

You could use arktype instead of zod and onyx/biomejs for linting

RRhys You could use arktype instead of zod and onyx/biomejs for linting

ethan•1/2/24, 6:45 AM

does biome support plugins yet?

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 })

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', ],