Drastically reduce the size of TanStack Start

[Hardel-DW]

Introduction

I had the impression that my node_modules were really big and massive. I looked and saw that TanStack had a huge dependency graph.
I tried to analyze and help. and I hope this can helps.

Here is the dependency graph. The red parts are mainly Babel with my suggestions, we can remove almost all of the commonjs from tanstack-start.
in the end, only three commonjs sub-deps would remain: use-sync-external-store, tiny-warning and source-map

• This would drastically reduce the weight of TanStack Start.
• This speeds up its installation.
• Allows for the use of more mature technology with better maintenance.
• Reduces bandwidth and environmental impact
• (Replace babel by oxc can speed up vite start time.

Cheerio

The first one I see is cheerio, which takes up a lot of space for a use that is extremely simplistic.
21 Dependencies that could be simplified. You can use of transformIndexHtml or a regex.

Used only one time in packages/start-plugin-core/src/dev-server-plugin/plugin.ts
ExtractHTML.ts
Plugin.ts

chokidar

The second is [email protected] in (@tanstack/router-plugin). Here, the solution is quite simple: migrate to v4, which reduces sub-dependencies from 13 to 1.
So no real action is necessary other than updating.

xmlbuilder2

7 subs-deps (Total 442 KB) that could be simplified with no Dependency. (I can provide codes if needed.)
Only used one time in tanstack/start-plugin-core

SiteMap.ts

recast

This dependency has 5 sub-dependencies, including commonjs, Can be replaced by oxc-parser better maintained, popular, fast and lite weight.
Used in only two files in @tanstack/router-generator

Transorm.ts
Utils.ts

Babel

This is by far the biggest piece that can reduce weight by almost 70% and dependencies by 50%. Babel can be replaced by OXC.
Faster, more powerful, infinitely smaller.
It's so complicated to navigate the graph that I may omit references.
It's more of a refactoring that may take a little time but will be beneficial in the long term.

babel-dead-code-elimination is not necessary because oxc/vite/rolldown natively integrates everything needed for bundling/minification.

You can remove :

• babel-dead-code-elimination (From @tanstack/directive-functions-plugin, @tanstack/server-functions-plugin, @tanstack/start-plugin-core and @tanstack/[email protected])
• @babel/types (From @tanstack/start-plugin-core)
• @babel/core (From @tanstack/start-plugin-core)
• @babel/code-frame (From @tanstack/start-plugin-core)
• @babel/preset-typescript (From @tanstack/router-utils)