inlineRequires and experimentalImportSupport

[Bardiamist]

Do you want to request a feature or report a bug?
Question

What is the current behavior?
Mystery

What is the expected behavior?
It should be well documented

Hello, I really need to understund how inlineRequires and experimentalImportSupport works but can't find documentation abount it. Where I can read about it? Or can somebode to describe how it works?

Is inlineRequires automatically doing next?

let VeryExpensive = null;
if (VeryExpensive == null) {
  VeryExpensive = require('./VeryExpensive').default;
}

Or steel need to write that?

Is inlineRequires working for native modules?
How it detecting when need to import file/init native module?

[raajnadar]

Hey the concept is pretty much straight forward. You import modules inline in simple terms load data on demand. This will help to cut the size of the main bundle and load the very less used code on demand or only when required.

I believe this is only for Js files & Js bundle. Because metro can bundle only Js files and not the native code.

[Bardiamist]

But how metro detecting when need to load some file? On some component render or when?

[raajnadar]

https://reactnative.dev/docs/ram-bundles-inline-requires#inline-requires this will answer all the question with a simple use case.

[Bardiamist]

I read that before create that issue.

Did you read my questions?:) I got next code from your link

let VeryExpensive = null;
if (VeryExpensive == null) {
  VeryExpensive = require('./VeryExpensive').default;
}

I can do it even with inlineRequires: false. So looks Metro inlineRequires flag and Inline Requires decribed here is different things.

Now I got only one answer: Metro working only with JS and no effect to native modules.

Still have next questions:
How inlineRequires flag related with conditional imports (require('./VeryExpensive')) ?
How Metro detecting when need to import file?

[Bardiamist]

Why I want to understand it?

Because I want to control flow.
Because now I enabled inlineRequires and got unexpected behaviour with next structure:

src/initialImports/reactotron.ts

if (__DEV__) {
  const Reactotron = require('reactotron-react-native').default;
  global.Reactotron = Reactotron;
}

src/initialImports/index.ts

import './reactotron';

src/index.tsx

import './initialImports';

Reactotron.log('Work in this place');

index.js

import { AppRegistry } from 'react-native';
import { App } from './src';
import { name as appName } from './app.json';

Reactotron.log('Dont work in this place'); // Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

AppRegistry.registerComponent(appName, () => App);

Another reason

It is importent to undestand how it works for require polifils for example. I need to be sure that that will work:

import { Buffer } from 'buffer';
global.Buffer = Buffer;

[Bardiamist]

Another related issue I faced previously brix/crypto-js#259 (comment)
Will Metro don't force every require exists if to enable inlineRequires?

[raajnadar]

You are not getting the simple concept if the inlineRequire flag is true the JS bundle will be dynamically added in the RAM on demand.

If the flag is false whole JS will be bundled in the RAM. You can't see anything visually you can see the change in the profiler use flipper to check the loading of the JS bundle you can see the change in bundle size.

eg: - Let's say your final bundle size is 100KB, if the module that you import inline is 10kb and if the inline require flag is true. Only 90KB bundle will be added in the RAM in initial load, and 10KB will be added when you require. If the flag is false the 100KB will be imported in startup.

[Bardiamist]

@raajnadar You talking about result. Your answer contains only general obvious things. Do you read my questions exactly?

JS bundle will be dynamically added in the RAM on demand.

How metro detecting that is need to load a part or the bundle?
Now I don't have any conditional import and I enabled inlineRequires. On app start it's not loading all files. So how it detecting when need to load? All my imports now is not in conditions.

@raajnadar Thanks for answers buy I get the impression that you do not know the answer. Did you developed inlineRequire or investigated how it works internally? If no then don't try to answer and keep it to somebody who understands this.

[raajnadar]

The code base of metro is open source you can dig into the source code to know how inline require works.

And IDK how you concluded that inline require false is not loading the whole bundle.

Did you even try to check if the file you imported is bundled properly.

[Bardiamist]

The code base of metro is open source you can dig into the source code to know how inline require works.

And IDK how you concluded that inline require false is not loading the whole bundle.

Did you even try to check if the file you imported is bundled properly.

https://reactnative.dev/docs/ram-bundles-inline-requires#investigating-the-loaded-modules

[Bardiamist]

inlineRequires described here:
https://reactnative.dev/blog/2021/03/12/version-0.64#inline-requires-enabled-by-default