Size of an (preact) app vs used libraries?

[tkassila]

I have a preact 10.10 app, which use @omiu/dialog or preact-material-components dialog. With @omiu/dialog a build size of app is 535kb and with preact dialog 567kb. If I will use preact dialog (npm i preact-material-components), does the app size contains all code of preact-material-components or only used dialog and card components code? Does the situation (=how much code will taken with a app) is the same kind with all js libraries etc? (The app size is not "normalized" into minimum code).

[rschristian]

does the app size contains all code of preact-material-components or only used dialog and card components code?

There's no way of us knowing that. Whether unused portions can be removed is up to your bundler and perhaps method of use.

For all major bundlers there are bundle visualizers, which you can use to look into your bunldes to see what's there. Using one of these you should be able to take a peek and determine whether or not only the dialog and card components are being used.

Does the situation (=how much code will taken with a app) is the same kind with all js libraries etc? (The app size is not "normalized" into minimum code).

Sorry, I don't follow.

That being said, preact-material-components is quite deprecated and probably is worth looking for a maintained project.

[tkassila]

Thank about the good answer. I had feeling that preact-materrial-components is quite heavy. But I haven't find any good (small) working ui components for the preact? Or are there some another better way to do, like from scratch (html, css etc)?

[rschristian]

I had feeling that preact-materrial-components is quite heavy. But I haven't find any good (small) working ui components for the preact?

I think MUI works fine with Preact, if you want to keep using material design. But most React UI libs should also work with Preact. Radix I know is an exception, as they heavily rely on React-specific behavior that's not supported even in preact/compat and never will be.

Can't really give any recommendations here though as I personally avoid component libraries like these.

Or are there some another better way to do, like from scratch (html, css etc)?

This is purely a personal preference thing. What's better for person A might be worse for person B. Use whatever you like best!

[tkassila]

Thanks! I have tryed with @omiu/dialog, preact-material-components and MUI material dialog and app size are: 535kb, 676kb and 567kb.

[developit]

@tkassila I have a feeling those bundle sizes might be including CSS that is getting compiled into your JS bundles. How are you bundling the project?