Fork me on GitHub
#shadow-cljs
<
2021-09-16
>
alexdavis13:09:01

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(() => {
    import('./home')
  }, []);
  ...
}
Is there a way of doing this with shadow?

alexdavis14:09:04

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

alexdavis14:09:05

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

:users
    {:entries [demo.components.account-overview
               demo.components.sign-in
               demo.components.sign-up]
     :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

thheller14:09:50

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

thheller14:09:11

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

thheller14:09:26

splitting/loading/preloading is all possible

thheller14:09:25

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

thheller14:09:49

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

thheller14:09:08

from the code perspective it is pretty much identical though

alexdavis14:09:16

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

thheller14:09:21

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

alexdavis14:09:28

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