Using tree-shaking on Metro Web projects

[mojavad]

Hi folks! 👋

It's been so cool to play around more with rnx-kit - it's a really cool project and I think it provides a lot of utility to the community.

We've recently been working on a universal app, using Expo Router, and consequently, Metro for Web. One of the major challenges with this is the lack of tree-shaking support in Metro - bundles on web can become huge if not correctly kept in check.

When I stumbled upon @rnx-kit/metro-serializer-esbuild, I thought it could be awesome to use it for web production bundling. Unfortunately, this doesn't work out of the box, and while it does bundle, it causes runtime errors.

I've tried on our production app, and there were some globals that were missing - I unfortunately, could not reproduce the same message so can't remember what globals they were 😅.

Instead, I've tried to add metro-serializer-esbuild to a brand new Expo Router project, and I'm getting the following runtime error:

Dynamic require of "../../app" is not supported

Here is the reproduction repo.

Given MSFT is using this for their apps (and seeing good results) and the importance of web bundle size, I think it could be a really good way to tackle the lack of tree-shaking issues.

Appreciate that it's not what rnx-kit is targeting, but was wondering if you had any thoughts or suggestions. 🙏

[tido64]

Hi @mojavad, I've had a look at this and I'm pretty sure that error comes from esbuild. esbuild has very limited support for require.context, which expo-router heavily depends on. Specifically, what's happening is that node_modules/expo-router/_ctx.web.tsx doesn't get transformed to the appropriate require statements like with Metro, and esbuild throws the exception you see there.

Someone will have to write an esbuild plugin for require.context to support this scenario. Unfortunately, we don't use this internally and I am not familiar with how require.context works, meaning we will have to rely on the community to provide this.