Bundle size
Closed this issue · 13 comments
I have tried to analyze the final weight impact in my application.
Compared to svelte-spa-router:
https://bundlephobia.com/result?p=yrv@0.0.30
Not just 10 KB.
Final bundle's size is different:
With svelte-spa-router:
Many src/*.svelte have a lot of stuff more with yrv.
And finally query-string about 3 KB.
25 KB more is huge!
Can I ask you why and if there is a way to "fix"?
Disclaimer: I am not affiliated with this project
That is the raw version of the files / the entirety of the svelte components before being put through the bundler / compiler. If you install YRV and check the actual files in the node_modules, you'll notice a dist/ folder that has 3 files, all of which are < 30kB. During a production bundle / build your bundler should use those instead of the raw source files.
All of that being said, why is an extra 0.07 seconds (assuming a 3 Mb/s connection) that big of a deal?
That is the raw version of the files / the entirety of the svelte components before being put through the bundler / compiler. If you install YRV and check the actual files in the node_modules, you'll notice a
dist/folder that has 3 files, all of which are < 30kB. During a production bundle / build your bundler should use those instead of the raw source files.
Not really.
I'm talking about production-ready bundled size.
All of that being said, why is an extra 0.07 seconds (assuming a 3 Mb/s connection) that big of a deal?
Is not about pure numbers. Is about how much code the CPU needs to analyze to render the page. And if you are using a very small CPU on very small HW then every extra byte weighs!
yrv is a magnificent project!
We should address bundle size now and it'll be beautifully fantastic!
Can I ask you why and if there is a way to "fix"?
I'm not sure. 🤔
The goal of yrv is not to be the smallest or fastest, but flexible and fun with enough features.
It has the features I wanted but no other routers provided me, so I prefer to pay the size to get more stuff quickly!
We can try to make query-string pluggable, e.g. Router.qs = queryStringModule — but the other source files are hard to reduce, or make them tree-shakeable.
I mean, I'm not against reducing the bundle-size but that's very subjective, at the end your main application should be your main concern as dependencies can be changed over time, dunno.
I'm trying to understand:
I created #36 for investigation.
First, small reduction in #37.
Second reduction: about 2 KB: #38.
This is a test.
Removing all the code for GUI error/failure handling for a single console.error(err) I can save about 2 KB.
It would be great to be able to use graphical error messages only in development mode and not in production.
What do you think about it?
It would be useful to implement tree-shake also for abstract-nested-router and query-string.
We can make query-string optional.
See what svelte-spa-router does here: https://github.com/ItalyPaleAle/svelte-spa-router#querystring-parameters
It would be useful to implement tree-shake also for abstract-nested-router and query-string.
The abstract-nested-router is at its minimum, I'm using all their methods on yrv.
But for query-string yeah, we should make it optional!
Hi, I've been working on this task and I have something you can help me test out:
- On
masterI've setup a new bundler that supports kind-of macros to disable entire code blocks - If you run
npm run prepublishOnlyyou'll got a stripped version from the same./srcfiles without DEBUG blocks
You can find the generated sources on the ./build directory, so if you import locally make sure you are either loading from /path/to/yrv/src/main or /path/to/yrv/build/main if you don't want DEBUG enabled — this may change to make yrv/debug or something like that work once finished.
I hope that helps to reduce the final size, please let me know if this is useful, thank you!
Fixed on v0.0.33 — check out the FAQ's