decrease size of the bundles

[romanown]

when i import any component from root example import { Button } from "svelte-materialify"; increased size of the bundles (js and css). +200kb css and 30kb js. how i can decrease its size? when i used import Button from "svelte-materialify/src/components/Button"; size is fine but work is wrong. use import MaterialApp from "svelte-materialify/src/components/MaterialApp"; to wrap my app is wrong.
REPL
https://svelte.dev/repl/7cefe135751c4b089be75713c869b53c?version=3.35.0

[Florian-Schoenherr]

Okay, this is a bit of a problem with our setup.
The REPL isn't doing what advanced install does, so in the REPL you can only import from "svelte-materialify".
But on your local machine, you can do "Advanced Install" and then import { Button } from "svelte-materialify/src"; and wrap it in MaterialApp. That should decrease the bundle size.

[romanown]

i to tryed it in the my hosting. same result.

[romanown]

importing wrapper MaterialApp gived 150kb css bundle.
import MaterialApp from "svelte-materialify/src/components/MaterialApp";

[Florian-Schoenherr]

Wow, you're right.
@TheComputerM

[Florian-Schoenherr]

@romanown I've made a change which should cut out some amount of css helpers and thereby removing a lot of bloat.
Next release you can use MaterialAppMin.

[romanown]

thank You. help me please to decrease size to use only used components. i am to wait.

[romanown]

how a long time it may be?

[Florian-Schoenherr]

I just asked @TheComputerM, he will update it tomorrow. For now, you could try this.
You don't need to try it now, you can wait for tomorrow and build out your site instead.
We will obviously solve the bloat.

[romanown]

thank You and thank @TheComputerM very match.

[romanown]

thank You. i tryed it. css is very good decrease. but js is more then before update and use min version.

i use only button, textfield and select elements.

[Florian-Schoenherr]

@TheComputerM only this works and I think that's bad:


Everything else gave me huge bundles, like @romanown has shown.

[gjovanov]

indeed tree shaking (reduced bundle size) only works if used like this:
import MaterialApp from 'svelte-materialify/src/components/MaterialApp/MaterialApp.svelte'

Any plan/timeline to support tree-shaking work like this?

import { MaterialApp } from 'svelte-materialify'

or

import { MaterialApp } from 'svelte-materialify'/src

Thanks.

[romanown]

can also use import { MaterialAppMin } from 'svelte-materialify'/src https://svelte-materialify.vercel.app/components/material-app/#remove-css-helpers-defaults-and-typography
but even so the file size remains larger than desired

[gjovanov]

For me this:
import { MaterialAppMin } from 'svelte-materialify/src'

doesn't work.

It pulls also many components that are not used by our app (Tabs etc).

It's not tree-shaking at all.

Unfortunately, the only way to pull components one by one (A la carte or tree-shaking) is via this pattern:

import MaterialApp from 'svelte-materialify/src/components/MaterialApp/MaterialApp.svelte'