Fork me on GitHub

On the topic of code splitting, I was wondering if there is a way to load chunks dynamically after a component has mounted. Say I have a login page and I know that a large amount of users will go onto the home page, at the moment I would have a sign-in and home module, and the home bundle would start downloading as soon as I click login. But it would make a lot more sense to say ‘after sign-in has mounted, start downloading the home module’. With webpack I could do this

function SignUp() {
  useEffect(() => {
  }, []);
Is there a way of doing this with shadow?


I have seen that, but doesn’t that just bundle multiple things together?


Like this creates a single ‘users’ bundle file that includes three pages

    {:entries [demo.components.account-overview
     :depends-on #{:main}}
But I wanted to know if you can have individual bundles, but pre download future bundles after a page has loaded and the component has mounted


I don't know what more to say that what isn't already in the post. the example you picked is a literal example trying to describe how different way of splitting may make sense in your app


sometimes grouping stuff is useful sometimes it may not be. all depends on what exactly your app does so I cannot answer that


splitting/loading/preloading is all possible


I mean (useEffect #(sl/load users-bundle) #js []) would be the preloading your mentioned


what you don't get is a automatic splitting webpack does. you are required to define :modules yourself. I believe that to a better way to do stuff but it requires more thought


from the code perspective it is pretty much identical though


Ok yeah I’ve just looked at the actual code, I assumed the wrong thing about how lazy-component worked


lazy-component was just a util to make the blogpost code less verbose


Yeah its my fault for not reading carefully enough, but that thread also has some good information I didn’t know