Is there a way to lazy export file with ESModule?

user_4975761 0
Viewed 775

I have a project which has many files to export. For now I use CommonJS to lazy export those files:

module.exports = {
  get AccessibilityInfo() {
    return require('../Components/AccessibilityInfo/AccessibilityInfo');
  },
  get ActivityIndicator() {
    return require('../Components/ActivityIndicator/ActivityIndicator');
  },
  // .... many other files 
 }

ReactNative do the same thing React Native, so that a file is only loaded when it is imported specifically.

I want to refactor this file with ESModule, but I can't find a way to export files lazily.
Is there a way to export files lazily with ESModule?
Is it necessary to export files lazily with ESModule?

commonjs es6-modules react-native javascript
2 Answers

The ECMAScript way of doing this is via dynamic import(). The syntax is basically the same and it does what you'd expect, except that it returns a promise (which is great - it means that the operation does not lock the thread). Your code could e.g. look like this:

export const getAccessibilityInfo = () =>
  import("../Components/AccessibilityInfo/AccessibilityInfo");

export const getActivityIndicator = () =>
  import("../Components/ActivityIndicator/ActivityIndicator");

You would then grab these modules like this:

import { getActivityIndicator } from "./the/module/above";

const ActivityIndicatorPromise = getActivityIndicator();

// Whenever you need to use the ActivityIdicator module, you first need to await for the promise resolution

ActivityIndicatorPromise.then(ActivityIndicatorModule => {
  // Do what you want here...
});

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. It also lists the cases where this syntax would be preferable. If you were hoping that this was possible using the static import syntax (import X from '../whatever';), rest assured - it is not.

user_37445740

No, there is not way to lazy export in react native

export does not have an effect on performance

import/require files have to make part of JS Bundle

components which are alive in memory put an effect on performance

In my point, there are three-way to make good performace

Solution 1: Dynamic Import

but you can load only dynamically component like this

const allPaths = {
  path1: require('file path1').default,
  path2: require('file path2').default
};


const MyComponent = allPaths('path1')

allPaths('path1') in this case only path1 component will be active

_

Solution 2: Stop render further Tree of Component

stop render on specific condition so further tree should not be active in memory and give not any effect on performace

render() {
    const {isReady} = this.state;
     if(!isReady)
     {
      return null;
     }

     return (
            <ActualComponent />
        )

}

-

Solution 3:Stop extra rerendering

you can use shouldComponentUpdate to stop extra renrendring. component on specifc condition only

shouldComponentUpdate(nextProps, nextState) {
  return this.state.name != nextState.name;
}
user_80798680
Related