feat(cli): Add support for Metro lazy bundling (expo#22724)

# Why - Companion to expo/router#622  # How - Add `lazy` query parameter for Metro requests and `EXPO_NO_METRO_LAZY` to disable the feature. Abiding by https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0605-lazy-bundling.md#__loadbundleasync-in-metro # Test Plan - Works when used with expo/router#622 --------- Co-authored-by: Expo Bot <[email protected]>
crummy · Jun 3, 2023 · 60d28ff · 60d28ff
1 parent f31b408
commit 60d28ff
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 4 deletions.
diff --git a/docs/pages/more/expo-cli.mdx b/docs/pages/more/expo-cli.mdx
@@ -372,6 +372,7 @@ From here, you can choose to generate basic project files like:
 | `EXPO_USE_CUSTOM_INSPECTOR_PROXY`   | **boolean** | <StatusTag status="experimental" note="SDK 49+" /><br/>Use a customized inspector proxy with improved support for the Chrome DevTools protocol.<br/>This includes support for the network inspector.                                                                                                                                                                                 |
 | `EXPO_USE_TYPED_ROUTES`             | **boolean** | <StatusTag status="experimental" note="SDK 49+" /><br/>Generate TypeScript types for Expo Router.<br/>This includes support for the network inspector.                                                                                                                                                                                                                               |
 | `EXPO_NO_CLIENT_ENV_VARS`           | **boolean** | <StatusTag status="experimental" note="SDK 49+" /><br/>Prevent inlining `EXPO_PUBLIC_` environment variables in client bundles.                                                                                                                                                                                                                                                      |
+| `EXPO_NO_METRO_LAZY`                | **boolean** | Prevent adding the `lazy=true` query parameter to Metro URLs (`[email protected]` and greater). This disables `import()` support.                                                                                                                                                                                                                                                         |
 
 ## Telemetry
 

diff --git a/packages/@expo/cli/CHANGELOG.md b/packages/@expo/cli/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Add `npx expo add` as an alias to `npx expo install`. ([#22510](https://github.com/expo/expo/pull/22510) by [@EvanBacon](https://github.com/EvanBacon))
 - Add `--reset-cache` flag to `expo start` and `expo export` for interop with the Metro docs. ([#22589](https://github.com/expo/expo/pull/22589) by [@EvanBacon](https://github.com/EvanBacon))
 - Add `--no-minify` flag to `npx expo export` to prevent minifying output JavaScript. ([#22544](https://github.com/expo/expo/pull/22544) by [@EvanBacon](https://github.com/EvanBacon))
+- Add `lazy` query parameter for Metro requests and `EXPO_NO_METRO_LAZY` to disable the feature. ([#22724](https://github.com/expo/expo/pull/22724) by [@EvanBacon](https://github.com/EvanBacon))
 
 ### 🐛 Bug fixes
 

diff --git a/packages/@expo/cli/e2e/__tests__/start-test.ts b/packages/@expo/cli/e2e/__tests__/start-test.ts
@@ -171,7 +171,7 @@ describe('server', () => {
 
       // URLs
       expect(manifest.launchAsset.url).toBe(
-        'http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false'
+        'http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&lazy=true'
       );
       expect(manifest.extra.expoGo.debuggerHost).toBe('127.0.0.1:19000');
       expect(manifest.extra.expoGo.logUrl).toBe('http://127.0.0.1:19000/logs');

diff --git a/packages/@expo/cli/src/start/server/middleware/ManifestMiddleware.ts b/packages/@expo/cli/src/start/server/middleware/ManifestMiddleware.ts
@@ -82,6 +82,7 @@ export function createBundleUrlPath({
     dev: String(mode !== 'production'),
     // TODO: Is this still needed?
     hot: String(false),
+    lazy: String(!env.EXPO_NO_METRO_LAZY),
   });
 
   if (minify) {
@@ -259,6 +260,7 @@ export abstract class ManifestMiddleware<
       dev: String(this.options.mode !== 'production'),
       // TODO: Is this still needed?
       hot: String(false),
+      lazy: String(!env.EXPO_NO_METRO_LAZY),
     });
 
     if (this.options.minify) {

diff --git a/packages/@expo/cli/src/start/server/middleware/__tests__/ManifestMiddleware-test.ts b/packages/@expo/cli/src/start/server/middleware/__tests__/ManifestMiddleware-test.ts
@@ -93,7 +93,7 @@ describe('checkBrowserRequestAsync', () => {
         // NOTE(EvanBacon): Browsers won't pass the `expo-platform` header so we need to
         // provide the `platform=web` query parameter in order for the multi-platform dev server
         // to return the correct bundle.
-        '/index.bundle?platform=web&dev=true&hot=false',
+        '/index.bundle?platform=web&dev=true&hot=false&lazy=true',
       ],
     });
     expect(res.setHeader).toBeCalledWith('Content-Type', 'text/html');
@@ -138,7 +138,9 @@ describe('_getBundleUrl', () => {
         mainModuleName: 'index',
         platform: 'android',
       })
-    ).toEqual('http://evanbacon.dev:8080/index.bundle?platform=android&dev=true&hot=false');
+    ).toEqual(
+      'http://evanbacon.dev:8080/index.bundle?platform=android&dev=true&hot=false&lazy=true'
+    );
 
     expect(constructUrl).toHaveBeenCalledWith({ hostname: 'evanbacon.dev', scheme: 'http' });
   });
@@ -155,7 +157,7 @@ describe('_getBundleUrl', () => {
         platform: 'ios',
       })
     ).toEqual(
-      'http://localhost:8080/node_modules/expo/AppEntry.bundle?platform=ios&dev=false&hot=false&minify=true'
+      'http://localhost:8080/node_modules/expo/AppEntry.bundle?platform=ios&dev=false&hot=false&lazy=true&minify=true'
     );
 
     expect(constructUrl).toHaveBeenCalledWith({ hostname: undefined, scheme: 'http' });

diff --git a/packages/@expo/cli/src/utils/env.ts b/packages/@expo/cli/src/utils/env.ts
@@ -146,6 +146,11 @@ class Env {
   get EXPO_USE_TYPED_ROUTES() {
     return boolish('EXPO_USE_TYPED_ROUTES', false);
   }
+
+  /** Disable lazy bundling in Metro bundler. */
+  get EXPO_NO_METRO_LAZY() {
+    return boolish('EXPO_NO_METRO_LAZY', false);
+  }
 }
 
 export const env = new Env();