Bundle size

[frederikhors]

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"?

[jhechtf]

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?

[frederikhors]

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!

[frederikhors]

yrv is a magnificent project!

We should address bundle size now and it'll be beautifully fantastic!

[pateketrueke]

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.

[frederikhors]

I'm trying to understand:

[frederikhors]

I created https://github.com/pateketrueke/yrv/pull/36 for investigation.

[frederikhors]

First, small reduction in https://github.com/pateketrueke/yrv/pull/37.

[frederikhors]

Second reduction: about 2 KB: https://github.com/pateketrueke/yrv/pull/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?

[frederikhors]

It would be useful to implement tree-shake also for abstract-nested-router and query-string.

[frederikhors]

We can make query-string optional.

See what svelte-spa-router does here: https://github.com/ItalyPaleAle/svelte-spa-router#querystring-parameters

[pateketrueke]

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!

[pateketrueke]

Hi, I've been working on this task and I have something you can help me test out:

• On master I've setup a new bundler that supports kind-of macros to disable entire code blocks
• If you run npm run prepublishOnly you'll got a stripped version from the same ./src files 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!

[pateketrueke]

Fixed on v0.0.33 — check out the FAQ's