Incorporate Code Splitting for Pup V2 & client side Redux about pup HOT 9 CLOSED

from pup.

How big is your bundle? Have you check with bundle-visualizer? Have you tried dynamic imports? If you get your client bundle down to 2.5MB (or less) you should be in good shape with load times.

My app has a bundle of 4MB and it takes two or three seconds to load on a new device.

from pup.

I also got my bundle size split by half in two minutes just by using react-loadable

in layouts/App/index.js

I replaced most of the regular components imports by Loadable Components here is an example

const AdminUsers = LoadableComponent(() => import('../../pages/AdminUsers'));

import Loadable from 'react-loadable';
import Loading from '../components/Loading';

const LoadableComponent = (dynamicImportFunction) =>
  Loadable({
    loader: dynamicImportFunction,
    loading: Loading,
  });

export default LoadableComponent;

it is a no brainer and can drastically reduce your bundle size.

IMHO this should be enabled by default on pup, why the heck do I load an admin component if the user is just looking and the home page?

from pup.

Happy to work this in

from pup.

@cleverbeagle Thank you so much Ryan. Also plz don't forget the client side Redux integration for those that want to use Redux on the client side (not just server side) in pup v2 by default.

Looking forward to any updates on this :). Super appreciative of your efforts to creating the best tools out there.

from pup.

@cleverbeagle Plz do let us know when you have any updates on this :)

from pup.

@ayhid , in reference to your comment (#336 (comment)) -- Were you able to get this working successfully on a cleverbeagle pup v2 based project without any issues?

from pup.

from pup.

@pagesrichie stay tuned :)

from pup.