How to use webpack code splitting in fluxible

[ali1k]

I am using the fluxible to build a large scale system where a bunch of nested, interconnected react components interact with each other. One of the issues I have come up with is that the minified client-side js file is getting too large. I heard about the new feature to have separate bundles in fluxible. Do you have any update on that?
I also found the code splitting feature of webpack (https://webpack.github.io/docs/code-splitting.html) which looks really nice but not sure how to use it within the fluxible framework!

[mridgway]

I haven't had time to create a full example of how to use the code splitting, but I do have a gist that shows the plugin that we are using internally here: https://gist.github.com/mridgway/53745e0da019058cc277. If I get some time I'd love to publish this bundle plugin at some point with proper examples and documentation.

[ali1k]

thanks for the pointer. Will try to use the plugin within our app and looking forward to more documentation and examples of this bundle plugin which I believe would be a crucial feature in fluxible when building large apps.

[mridgway]

Duplicate of #169

[localnerve]

@ali1k @mridgway FYI, I have successfully used webpack code splitting with Fluxible, and have an example project that uses this technique.

The flux-react-example-sw project uses it to download the code (actions, stores, components, and utils) for presenting the contents of a modal dialog (in this example, just the "settings" dialog). Once the bundle is downloaded, the actions, stores, components, and utils are injected into the app.

The example uses service-workers, so the bundle is actually pre-cached - but that's an enhancement, not a requirement.

Note the example does not also bundle the css for the component (in this particular example), but it could (using webpack/loaders). Normally, components should come bundled with their css. This example doesn't because the project is still using Compass for configuration reasons. So in this case, the css is downloaded and cached separately (which itself is an example of a workaround, I guess).

The main splitting code is located here, and it is used when the dialog gets its contents from the data service, here.

In the example, a modal can represent any contents, and those contents are retrieved from a data service. The modal in the example controls push notification settings for the app. So the actions, stores, components, and utils that are bundled all relate to settings and push.

The split download is triggered when you click the settings cog in the application. If you have devtools open, and are looking at the main source, you can see new actions, stores, components, and utils arrive (via injection) into the main application at runtime.

Let me know if you have any questions about the example, I'm happy to explain it. Hope this helps.