Conditional loading / Lazy loading

[ptomasroos]

Any plans or thoughts how to handle conditional loading? There are a few cases where the entire app in javascript might be too big. Async loading of the async deferred script needed for the current launched page.

Thoughts or ideas? Require.js / Webpack

[gpbl]

I'd go with webpack's code splitting: for example, if you are using fluxible-router you could put a require.ensure in a route action and call the done function in its callback.

[agrippanux]

Code splitting + gzip compression helped us a ton

[jamesjjk]

Has anyone achieved this with an isomorphic app?

[mridgway]

We have been using webpack's code splitting by creating a loader.js file that maps a bundle name to a require.ensure call. We then have a Fluxible bundle plugin where you register all the bundles on the server-side and then call context.loadBundle from within an action. The bundle plugin keeps track of which bundles have been "loaded" and rehydrates those bundles on the client using the loader.js. Any new actions that execute loadBundle on the client will lazy load new bundles as they're needed.

Here is a code snippet of our plugin and the loader.js file. It's not perfect, but it works for now: https://gist.github.com/mridgway/53745e0da019058cc277

[jamesjjk]

@mridgway Nice work, do you get any checksum errors? How do you avoid when the bundle is already loaded server side?

[jamesjjk]

@mridgway Can you give an example of how you use this plugin? Much appreciated!

[taylorjames]

@mridgway Id also like to see an example

[rickihastings]

Has anyone managed to achieve this? The loader.js gist doesn't really help without a decent example on how to use it.

[localnerve]

An example of this in an isomorphic app is https://github.com/localnerve/flux-react-example-sw.

In that example, a modal action has contents that can be conditionally loaded.

Specifically, the modal presents the Settings component, consisting of an action, component, and store (and utility code) as a separate bundle (JS only). You can (and probably should) also bundle your styles in the same bundle, but that example uses an older style build technique.

With Webpack, you have to hard code the split (the args to require.ensure), see the repo's utils/splits file.

Hope that helps, Alex On Nov 22, 2015 11:03 AM, "Ricki Hastings" [email protected] wrote:

Has anyone managed to achieve this? The loader.js gist doesn't really help without a decent example on how to use it.

— Reply to this email directly or view it on GitHub https://github.com/yahoo/fluxible/issues/169#issuecomment-158772126.

[rickihastings]

Thanks for the example. I've been able to get lazy loading "kind of" working. I can get the bundling and conditional loading working fine. The problem is that fluxible-router requires the handler to be defined, or even if one isn't defined, it can't be added or modified later on.

Or maybe it can, am I missing something?

[localnerve]

Maybe I'm not understanding. Can't you expand the available routes by sending RECEIVE_ROUTES in the downloaded code or in the ensure callback? It sure looks like it will expand:

// RouteStore RECEIVE_ROUTES handler
_handleReceiveRoutes: function (payload) {
        this._routes = Object.assign(this._routes || {}, payload);
// etc...
}