Add Typescript increasses the bundle size
selankon opened this issue · 4 comments
- Check if updating to the latest Preact version resolves the issue
Describe the bug
I added to our project typescript support and it increases 200KB the final bundle size after build.
To Reproduce
- The previous version without TS
git clone -b fix/run_linter https://github.com/selankon/lime-app/
- Then, a branch with the TS enabled:
git clone -b feature/enable_typescript https://github.com/selankon/lime-app/
Then you can use this command to see the difference between bundles:
npm i && npm run build:production && du -sh build
The build:production
command is the following:
preact build --no-prerender --no-sw --no-esm && rm build/*.map
You will see the difference, without Typescript 664K build
and with Typescript 808K build
which supposes an increment of 200KB, which is a lot IMHO.
You can see the file changes here: libremesh/lime-app#382
Expected behavior
Is any miss configuration on typescript and preact? As is a webapp for embedded devices, the increment shouldn't be so **high.
Extra
After preactjs/preact#3900 I tried change some configurations on this branch POC/fix-ComponentChildren-not-ReactNode,
which the size is morless the same (about 820KB
), without babel dependency.
Please don't use raw directory size as a source of comparison; that is not a sound way to compare JS bundles.
Creating a new JS & TS Preact-CLI app shows a difference of ≈0.003% between the output bundles, which is to be expected. But to test anything besides the bare templates, I need a minimal reproduction.
I'll be honest here: asking maintainers to look through a full app containing dozens of libraries and a +3308, -2030
diff for a perceived bug is being incredibly disrespectful of our time. You need to invest some time narrowing the (perceived) bug down before you ask other people to investigate it for you. I'd be more than happy to help at that point.
I can reopen if you provide a minimal reproduction.
Ok thanks for your comment, I will investigate further before post anything. Could you recommend me a better way to analyze the production build size?
Thanks for your job
To compare, you should look directly at the bundles (rather than directory). This means bundle.<hash>.js
w/ JS vs bundle.<hash>.js
w/ TS, and so on. First narrow down what specifically has changed; as you're only looking at raw directory size, for all we know, you might've made a typo in an import statement and now there's an extra copy of an image or something.
For analyzing bundles, there is the --analyze
flag on preact build
, which you can use to get an idea of the makeup of your bundles. If a JS bundle did increase after the conversion, you can use that to figure out what's changed (besides doing a direct text comparison, which can obviously be a tedious process in large bundles).