Fork me on GitHub
#shadow-cljs
<
2021-09-15
>
mccraigmccraig12:09:04

@thheller we (@rosado & i) did an experiment - we created an RN build with a chunk, and added logging to the chunk .js wrapper so that we could see when the file is loaded. we js/required the chunk on a click in the app, and confirmed that the chunk .js file was indeed loaded dynamically

thheller15:09:49

@mccraigmccraig thanks for the feedback. good to know 🙂

mccraigmccraig15:09:57

very good for us - if we couldn't get a working cljs code-splitting story with react-native then we would have had to give up on cljs 🙀

thheller16:09:46

how much impact does it have on load time? loading on demand vs loading everything?

mccraigmccraig16:09:39

we're porting our app from cordova to react-native now, and building code-splitting in from the beginning of the port. analysis we did on the cordova app suggested we could save about 60% of the js load time by loading on demand. it will not make that much difference for a user with an iphone 13 (time-to-interactive <2s), but will make a big difference to anyone on an underpowered android from a few years ago (time-to-interactive >10s)

thheller16:09:55

hm yeah. only other project I know using :chunks for RN is the status-im stuff. always good to have some more data on hand for this stuff 🙂

thheller16:09:42

guess it'll be about the same as browser builds on lower end devices

mccraigmccraig16:09:58

RN is all quite new to me, but i had a look around the shadow source... it looks like :chunks is sugar over :modules - and the js/require stuff in RN itself is all pretty vanilla - so altogether there doesn't seem to be anything scary or magical about the splitting or loading mechanisms, which definitely gave me some comfort

thheller16:09:02

yeah. I only looked at the RN JS examples on how to do lazy loading. so I knew what kind of output it needs and just made shadow-cljs create that 😛

thheller16:09:41

never built an actual RN app myself but seemed straightforward enough to implement so I did

😎 2
thheller16:09:36

basically everything in shadow-cljs is based on :modules (or now called :chunks) so it was quite easy

thheller16:09:13

closure compiler renamed everything from modules to chunks so I just started the RN stuff with :chunks directly

mccraigmccraig16:09:31

ahh, that's why :chunks - i did wonder

thheller16:09:55

yeah works in browser builds too. exactly the same thing as :modules, just a rename

thheller16:09:25

the name makes more sense too. modules is quite overused and unclear what it actually means

mccraigmccraig16:09:37

yeah, chunks is clearer

mccraigmccraig16:09:25

RN has its own code-splitting mechanism called RAM Bundles (yet another word for it)... it did take me a while to realise that we could ignore that, because once the code-splitting is done, it's just js/require

thheller16:09:54

yeah I was never sure how to get the actual lazy loading part since js/require looks sync

thheller16:09:26

but I guess it can be when its in memory just not initialized

mccraigmccraig16:09:19

um i think js/require is sync - doesn't matter to me though - tiny (mostly not noticeable, unless you've got one of those underpowered old 'droids, in which case you are used to them) pauses throughout a session vs big pause at the start of a session

mccraigmccraig16:09:27

if you want some additional docs on RN config for shadow, i'm happy to do a PR or whatever, once we're properly up and running

thheller16:09:04

always welcome to get more docs on the topic. I don't use RN myself so I let a linger a little too much 😛

lilactown16:09:26

I have a question that I probably know the answer to but curious to get others thoughts, related to code splitting: say I have a library where I want to dynamically load some code. e.g. something like re-frame-10x or another dev tool that is used to inspect the running state of the app. I'd like it to be available in production, but not affect the size of the main bundle of the app. could there be a way in the future to "provide a chunk" as a library? the alternative here of course is to instruct users how to configure the chunk themselves, which seems like a task many wouldn't want to bother with but obviously works today

thheller16:09:13

I'd say no. setting up a chunk is trivial so I don't see a reason why we would need any automation there

2
thheller16:09:50

and anything you add to your app in :advanced will affect the bundle size

thheller16:09:16

it rarely works to move 100% of the code into the lazy loaded chunk. a good percentage for sure but not everything