Do not include major components in the bundle

[jojo05]

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]

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]

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

[jojo05]

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]

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]

Thanks.

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

[jojo05]

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]

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!