Theo's Typesafe Cult•2y ago

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•2y 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

JaaneekOP•2y 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•2y ago

That's just nextjs being slow on dev server

JaaneekOP•2y 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•2y ago

🤷

JaaneekOP•2y 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•2y 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

JaaneekOP•2y 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•2y ago

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•2y ago

So you build it with every change you make?

Perfect•2y 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.

JaaneekOP•2y 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•2y 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•2y ago

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

JaaneekOP•2y ago

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

arcanereinz•2y 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?

JaaneekOP•2y ago

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

arcanereinz•2y 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.

JaaneekOP•2y 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•2y 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•2y 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•2y ago

Message Not Public

alonmiz•12mo 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•12mo ago

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

ethan•12mo ago

does biome support plugins yet?

Gaming

Programming

My project got pretty slow