Do not include major components in the bundle

zouhir / preact-habitat

Zero configuration Preact widgets renderer in any host DOM

MIT License

518 stars 43 forks source link

Do not include major components in the bundle #13

Closed jojo05 closed 6 years ago

jojo05 commented 7 years ago

There should be an option to omit certain components from the bundle i.e. preact.min.js should be declared as a script in the example so that is cached separately of the bundle.js. The same for large components that may be duplicated in different bundles

Does this make sense? Thanks

zouhir commented 7 years ago

Hi @jojo05

That is up to the user to configure in their build tool.

If you use webpack for instance, you can configure to make 2 bundles

vendor: ['preact', 'lodash', 'moment', 'etc..']
widget: contains your core widget code, however, you want to ensure vendor bundle availability

it is well documented here: https://webpack.github.io/docs/code-splitting.html

I'll leave this ticket open for any further questions

zouhir commented 7 years ago

Closing this for now, please re-open if any help is needed.

jojo05 commented 7 years ago

Thanks. I am trying to figure out how to do this in preact-cli, using an html template

Does preact-cli fall short for your needs?

zouhir commented 7 years ago

Hi @jojo05 apologize for my delayed response.

Making your component portable requires 2 things:

UMD as a target library type.
Having power to modify the output HTML or choose your own HTML template to start with.

I will go speak with the CLI folks as I'm user but not expert in Preact-cli and I'll let you know if that's possible. Maybe make an example as well.

jojo05 commented 7 years ago

Thanks.

Maybe you should open an issue so that the discussion is open to anyone.

jojo05 commented 7 years ago

Hi @zouhir.

Not sure about UMD. I am looking for the simplest thing that will work, e.g. I like the approach taken by the accessible-autocomplete library

https://github.com/alphagov/accessible-autocomplete/blob/master/examples/preact/index.html#L334:L344

The second point is clear, so preact should always be used with a template.

zouhir commented 7 years ago

Hi @jojo05

I just thought I drop you a reference if you would like to use preact-habitat with preact-cli: https://github.com/zouhir/widget-template I hop that helps.

The approach used by that example should work fine for your widget, you can totally use it if you like!