typescript performance issues
Does anyone have very slow typescript performance using tsr? I now have two pretty small apps with tsr (10-20 routes), and the lsp speed is multi seconds consistently. tsr seems to be a common denominator (not definitive, i have a skill issue knowing how to get traces from the ts server). Has anyone experienced something similar and solved the perf issues? Getting several second autocomplete time on an m2 mac pro is just brutal
9 Replies
adverse-sapphire•2y ago
Can't say I have, I've got around 40 routes its fine for me.
That being said the typescript compiler can be a bit finicky at times.
Edit: I'm on a base M1 air.
Code-based or file-based?
And monorepo? or not?
conscious-sapphire•2y ago
Something feels off if it is only 10-20 routes. Can you run
tsc --extendedDiagnostics. Also provide a reproducer so I can profile it
Are you using zod? Many params or search params? I've noticed zod can really hurt TS server with router.fair-roseOP•2y ago
- code based, both
- monorepo (pnpm) for first, normal project/just a frontend for second
Project 1
Monorepo, using an rpc with elysia so this would not be easy to make a repro for. No zod, and minimal search param usage
tsc --noEmit --extendedDiagnosticsFiles: 804 Lines of Library: 40241 Lines of Definitions: 134041 Lines of TypeScript: 10536 Lines of JavaScript: 0 Lines of JSON: 0 Lines of Other: 0 Identifiers: 216527 Symbols: 283182 Types: 84515 Instantiations: 14028620 Memory used: 340645K Assignability cache size: 32881 Identity cache size: 2444 Subtype cache size: 759 Strict subtype cache size: 1209 I/O Read time: 0.12s Parse time: 0.34s ResolveModule time: 0.12s ResolveTypeReference time: 0.00s ResolveLibrary time: 0.01s Program time: 0.64s Bind time: 0.20s Check time: 4.49s printTime time: 0.00s Emit time: 0.00s Total time: 5.34s Project 2 Normal frontend, minimal libs (tanstack router & query, minimal zod usage, radix)
tsc --extendedDiagnosticsFiles: 577 Lines of Library: 38209 Lines of Definitions: 118792 Lines of TypeScript: 7111 Lines of JavaScript: 0 Lines of JSON: 0 Lines of Other: 0 Identifiers: 169800 Symbols: 220740 Types: 55626 Instantiations: 23533456 Memory used: 283118K Assignability cache size: 22245 Identity cache size: 2296 Subtype cache size: 356 Strict subtype cache size: 1989 I/O Read time: 0.10s Parse time: 0.31s ResolveModule time: 0.14s ResolveTypeReference time: 0.00s ResolveLibrary time: 0.00s Program time: 0.58s Bind time: 0.16s Check time: 6.06s printTime time: 0.00s Emit time: 0.00s Total time: 6.80s Ill get back to you on the reproducer
conscious-sapphire•2y ago
Thanks. The one with zod looks worse already
fair-roseOP•2y ago
Note, first diagnostic was for the project not using zod, but it does have a ton going on (rpc lib hooked up with elysia backend, drizzle, typebox).
conscious-sapphire•2y ago
I'm trying to keep the TS perf of tsr good but noticed some issues with some libraries. To get suggestions TS server has to evaluate the whole route tree atm. If your route tree contains some libraries which are doing a lot of work for TS then this slows down the evaluation of the route tree, it accumulates with more routes
But you don't have a large route tree so I'm thinking you might have some heavy TS libraries or not so optimised libraries
fair-roseOP•2y ago
Okay ill try to make a reproduction at some point this week. In the mean time here's my smaller projects package.json
"dependencies": {
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-toast": "^1.1.5",
"@tanstack/query-sync-storage-persister": "^5.24.1",
"@tanstack/react-query": "^5.24.1",
"@tanstack/react-query-devtools": "^5.24.1",
"@tanstack/react-query-persist-client": "^5.24.1",
"@tanstack/react-router": "^1.17.4",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^1.0.0",
"date-fns": "^3.6.0",
"lucide-react": "^0.341.0",
"react": "^18.2.0",
"react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20.11.20",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
Just a bunch of ui stuff, tanstack libs, and zod. I do have loaders in about half the routes which end up getting parsed by zod here
conscious-sapphire•2y ago
Sure, give me a ping when you have the reproducer so I can figure out if it's us or not
conscious-sapphire•2y ago
There was some more performance improvements in recently. You can maybe try the new object syntax which I've had some success with https://tanstack.com/router/v1/docs/framework/react/guide/type-safety#consider-using-the-object-syntax-of-addchildren
Type Safety | TanStack Router React Docs
TanStack Router is built to be as type-safe as possible within the limits of the TypeScript compiler and runtime. This means that it's not only written in TypeScript, but that it also fully infers the types it's provided and tenaciously pipes them through the entire routing experience.
Ultimately, this means that you write less types as a deve...