Few things to know
- Using RAM bundling can worsen your load time to a screen that has components that have not yet loaded because it needs to natively reach for the file in-memory
- Make sure to use modulePaths to set the essential JS files in the first load
- Preloading before navigating might be a good idea?
const getLoadedModules = () => {
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
.filter((moduleId) => modules[moduleId].isInitialized)
.map((moduleId) => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
.filter((moduleId) => !modules[moduleId].isInitialized)
.map((moduleId) => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
console.log(
`module.exports = ${JSON.stringify(loadedModuleNames.sort(), null, 2)};`,
);
};
Module example:
const module = {
dependencyMap: [2, 7, 494, 495, 493],
factory: ['Function anonymous'],
hasError: false,
hot: {
_acceptCallback: null,
_didAccept: false,
_disposeCallback: null,
accept: ['Function accept'],
dispose: ['Function dispose'],
},
importedAll: {},
importedDefault: {},
isInitialized: true,
publicModule: {
exports: {},
hot: {
_acceptCallback: null,
_didAccept: false,
_disposeCallback: null,
accept: ['Function accept'],
dispose: ['Function dispose'],
},
id: 0,
},
verboseName: 'index.tsx',
};
Some strategies to adopt:
- Use inline requires for the navigator screen components?
You can use "getComponent"
<Stack.Screen
name="Profile"
getComponent={() => require('./ProfileScreen').default}
/>
But what about all of the imports happening at a highlevel? How do we map what's necessary versus what's not?