dynamic import

[hosseinmd]

Describe the bug

On v5 i try to use dynamic import for local files (not remotes) there was an error Environment doesn't support lazy compilation (requires EventSource) i fixed it by this patch on webpack.

How we could fix it in repack or webpack?

diff --git a/hot/lazy-compilation-web.js b/hot/lazy-compilation-web.js
index ec8253f0a3cac0da8e84c16b6b64acb5f8402499..fad62e9f814eeb1fcb69df266197bedd8cdc5a82 100644
--- a/hot/lazy-compilation-web.js
+++ b/hot/lazy-compilation-web.js
@@ -1,4 +1,5 @@
 /* global __resourceQuery */
+const EventSource = require("react-native-sse")
 
 "use strict";
 

System Info

.

Re.Pack Version

5.0.0-rc.5

Reproduction

.

Steps to reproduce

.

[jbroma]

@hosseinmd v5 doesn't have support for lazy compilation for now - when I've started the migration to rspack there was no support for lazy-compilation (but there is now), we just need to bring it back and make it work with both rspack and webpack.

This is a low priority though - benefits of lazy compilation are not that great when you have rspack which is already really fast

[hosseinmd]

React-native package is not created for download from a server, so they don't care size of bundle. we could reduce it by dynamic import.
Also, dynamic import is not for been fast in development it's main purpose is being fast in production, we will fast with dynamic import because of downloading less and executing less code. Additionally, Memory usage will also decrease.

[hosseinmd]

However, I Think we are not so far to achieve it.

[jbroma]

React-native package is not created for download from a server, so they don't care size of bundle. we could reduce it by dynamic import. Also, dynamic import is not for been fast in development it's main purpose is being fast in production, we will fast with dynamic import because of downloading less and executing less code. Additionally, Memory usage will also decrease.

could you please explain this use case a little bit more? I'm not entirely sure how you plan to use lazy compilation in production.

[hosseinmd]

Somthing a little like next js.
Imagine I have a federated superapp where the initial app rendering the home screen requires users to download a significant 5MB bundle upon startup. By implementing lazy loading for other screens within the app, Webpack will split the bundle into chunks, eliminating the need for users to download the entire 5MB at once. My vision is that the repack should make us behave more like a web app, encouraging us to adopt a web app mindset.

[jbroma]

So I wanted to clarify one bit:
What you're referring to is code-splitting and not lazy compilation - lazy compilation is used in dev so that the parts of the app separated by dynamic import can be compiled on demand and not upon startup of the dev server.

If you are looking for performance gains like in terms of app startup improvements in production by splitting the initial bundle then it's not going to be worth it - Hermes already optimizes that part, and you will likely make it slower than it was before. It's better to pack as much as you can in the initial bundle to get the best results.