Separate component bundles?

[jefftherobot]

Have you a way to bundle and dynamically include the data-components as standalone? My steps for doing this with vanilla JS and require.js was first parsing the DOM for any data-components. This "loader script" was part of a core.js that got loaded on every page. The components were separate bundles that got asynced by a require() call. This saved page weight a lot.

I see with react-habitat you have to register all the components up front, but if the components could vary per page, I would only want to load that components code into the browser.

[jennasalau]

Hi Jeff, thanks for the message.

We currently get around this issue by using Webpack's Code Splitting feature. It has worked well for us and I recently noticed that this is what AirBnb are doing as well which gives me confidence in it.

https://webpack.github.io/docs/code-splitting.html

I believe Browserify has a similar feature https://www.npmjs.com/package/partition-bundle

What do you think about this approach? We could build something into this library to do this but Im reluctant too. I fell the library shouldn't be doing that kind of dependency management when we can leverage webpack and browserify.

However, If we can come up with an elegant solution architecture Im happy to put in the effort to building it (or accepting a PR) :)

I'll leave this issue open for now as I think we should at least add a "Performance" section to the read me.

[jefftherobot]

I agree with using webpack or browserify for code splitting and keeping it out of the library. It's something I'm looking into doing with JSPM and SystemJS also. I guess my question revolved around splitting the code out specifically around the components so they can be asynced in "on demand". Here is an example using webpack:

https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk-advanced

Your library needs all the components registered at startup, so they can't be individually split out from the main core code. I would like to async in data-components on demand. Maybe this isn't the best way to do it?

[jennasalau]

Oh wow to be honest i didn't even know webpack did that! Hmm okay I'm going to need to research this a bit more and see if we can make it support this setup improvement :)

[jennasalau]

This is now available in v0.5.0