react / react/metro

More clear documentation on Dynamic Imports

Open
#1,081 0 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
5.6k
Forks
696
Avg merge
8m
Merged PRs (30d)
7

Description

Currently, I'm exchanging some lazy loaded routes, that uses functions wrapping "require" in favor of dynamic imports in combination of React.lazy and Suspense.

The problem is, although in development I see in the docs Metro will indeed lazy evaluate the lazy loaded modules, isn't clear that this will actually happen on production too:

"import() calls are supported out of the box. In React Native, using import() automatically splits your application code so that it loads faster during development, without affecting release builds."

from https://facebook.github.io/metro/docs/module-api/#import-dynamic-import

So, it will not affect release builds because is retro compatible to require, or because instead of lazy loading it will statically load for production (in contrast to development)? The docs seems not much clear about it :/

I just need to ensure that the whole app will not be loaded at once on startup and change the current behaviour I'm achieving by using () => require() functions on my navigations.

Thanks in advance! :)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Metro module API documentation section on dynamic import and verify how import() behaves in development versus release builds. Clarify whether release builds preserve lazy loading or fall back to eager loading, and update the documentation so the startup-loading behavior is unambiguous.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, react-native
Domain
build-system, documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.