Code splitting

[zamotany]

Up-to-date docs

Up-to-date docementation for Code Splitting is available at: https://re-pack.netlify.app/docs/code-splitting/concepts/

Out-of-date docs

Asynchronous chunks

Asynchronous chunks allows you to split your code into separate files using dynamic import() or by
manually declaring them in Webpack configuration using entry option.

Each chunk's code will get saved separately from the main bundle inside its own .chunk.bundle file and included in the
final application file (ipa/apk). Chunks can help you improve startup time by deferring parts of the application
from being both parsed and evaluated at the start of the app. The chunks code will still be included in the file,
so the total download size the user will have to download from App Store/Google Play will not shrink.

Asynchronous chunks support requires Re.Pack native module to be included in the app
to download/read and evaluate JavaScript code from chunks. By default, the native module should be auto-linked
so there's no additional steps for you to perform. The template webpack.config.js
is configured to support asynchronous chunks as well.

Asynchronous chunks and Hermes

Chunks are fully supported when using Hermes, with one caveat: only the main bundle will be automatically
transformed into bytecode bundle by Hermes. By default, all chunks will be left as regular JavaScript files.

If you want all files, including chunks, to be transformed into bytecode ones, you will need to add
additional build task/step to XCode/Gradle configuration to transform chunks with Hermes CLI or create
a Webpack plugin to transform chunks with Hermes CLI after compilation is finished, but before the
process exits.

In the future you will be able to use ChunksToHermesBytecodePlugin for that.

[dlebedynskyi]

The template webpack.config.js is configured to support asynchronous chunks as well.

looks like link is wrong. Can you please update it?

[zamotany]

done

[RichardLindhout]

By default, all chunks will be left as regular JavaScript files.

Is this bad for performance? E.g. what are the advantages and disadvantages of the ChunksToHermesBytecodePlugin?

[zamotany]

It's not bad, but it's not good either. By generating bytecode bundle and using that instead of regular JS file you can save on paring time when running the application, which depending on a size can improve the startup performance/chunk loading time.
To be clear, ChunksToHermesBytecodePlugin doesn't exist yet. This is something we have on a roadmap, but there are other pressing matters to be handled first. ChunksToHermesBytecodePlugin would take your JS chunks and using Hermes CLI create bytecode variants of them - your build will be slower but startup/chunk loading time might be faster depending on your project.

[ctomichael]

Question about this. I saw you mentioned that all chunks will be included with the app. Is it possible to download the chunks from a CDN and then require them from storage?

Our usecase is we have some AR scenes being built using ViroReact. We want to be able to dynamically load new scenes into a live build without requiring us to update the entire app via the store or Codepush, as the scenes can be quite heavy. What we're thinking is having each AR scene be a separate chunk that gets hosted on a CDN, and then when the user decides to view the scene, the app pulls down the chunk file (and any associated assets), requires it and then renders.

[zamotany]

This docs is slightly outdated, in Re.Pack 2.x all chunks are remote chunks by default and you can upload them to a remote location (like a CDN).
You can read more here:

• how to use code splitting the right way #84
• https://re-pack.netlify.app/docs/api/react-native/classes/chunkmanager/
• https://callstack.com/blog/implementing-code-splitting-in-react-native-with-re-pack/

[Damdias]

do you have sample app with CDN support?. i went through above doc, seems issue with bundle file name