Skip to content

Instantly share code, notes, and snippets.

@AndreiCalazans
Last active April 2, 2022 14:02
Show Gist options
  • Save AndreiCalazans/74a36b2ee4dec947ab744f8784bceb95 to your computer and use it in GitHub Desktop.
Save AndreiCalazans/74a36b2ee4dec947ab744f8784bceb95 to your computer and use it in GitHub Desktop.
Everything you need to know about RAM Bundling & Inline requires

Doc

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment