search

TheComputerM / svelte-materialify

A Material UI Design Component library for Svelte heavily inspired by vuetify.
https://svelte-materialify.vercel.app
MIT License
622 stars 84 forks source link

decrease size of the bundles #155

Open romanown opened 3 years ago

romanown commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

romanown commented 3 years ago

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

Florian-Schoenherr commented 3 years ago

yup Wow, you're right. @TheComputerM

Florian-Schoenherr commented 3 years ago

@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 commented 3 years ago

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

romanown commented 3 years ago

how a long time it may be?

Florian-Schoenherr commented 3 years ago

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 commented 3 years ago

thank You and thank @TheComputerM very match.

romanown commented 3 years ago

thank You. i tryed it. css is very good decrease. but js is more then before update and use min version. image i use only button, textfield and select elements.

Florian-Schoenherr commented 3 years ago

@TheComputerM only this works and I think that's bad: image image Everything else gave me huge bundles, like @romanown has shown.

gjovanov commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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'