Meeting Notes 2021-10-19

[afoxman]

Meeting Notes

Recording is posted to our Teams channel

Metro as a Web bundler

Some of us are pursuing this, and are at different stages of readiness. The performance gains vs. Webpack are notable. The community at large probably doesn't know this is a possibility. There's an opportunity to help other developers by sharing documentation on how to get started. Facebook can post it, drawing attention and possibly PRs from the community in support of it as a first-class use-case of Metro.

If you can contribute docs, even bits and pieces, we can iterate on them. Use our GitHub discussion board or Teams channel.

Metro Module IDs (continued from last month)

AirBNB has a working system which saw 92% gain in module re-use between builds! Page size increased 3-5%. AB testing is underway.

Almost ready to be upstreamed for community use. Will check back next month.

Metro remote caching (continued from last month)

AirBNB and Stripe both have this working. It's a huge cost saver, and would benefit the community to understand (a) that it exists, and (b) how to do a basic setup in a shared-dev/CI environment.

S3 as a backing store has latency issues outside of the United States. Also, working with 10,000+ files means lots of roundtrips. May need to look at batching.

The community needs a "Getting Started" doc. Facebook can post it, amplifying it to the community.

Please contribute docs and we can iterate on them. Use our GitHub discussion board or Teams channel.

Haste-map replacement experiments (continued from last month)

Facebook is looking into Watchman. Confirmed that skipping the "crawl" phase, which is only needed when using haste modules, is possible and would save a lot of time and resources. Also worth looking into making haste-map APIs async to allow for parallel operations. This requires coordination with Jest who owns the code.

esbuild experiments/progress (continued from last month)

Callstack: using esbuild-loader for Webpack and Re.Pack in a fresh React Native project. Needed to pair with babel-loader to deal with flow. Despite that, still seeing overall performance gain of 33% compare to using only babel-loader (!). Likely to get better with a real app vs. a test app. Details are here.

Bundle-size reduction using tree-shaking and bundle-splitting

AirBNB is experimenting with both techniques. They work as a plugin - no Metro changes needed. Seeing gains via tree-shaking, but not yet beating Webpack. Seeing higher gains (code reductions) via bundle-splitting. Details are here.

Microsoft has also experimented with tree-shaking using esbuild (discussed last month).

Will carry this item to next month, and look for an update from both AirBNB and Microsoft. When might it be available to the community?

Metro + Sucrase

Expo: Published a blog article showcasing work in this area. The headlines are 2x faster initial bundling, 18% reduction in bundle size, and its fully documented. Other transpilers, like esbuild, are supported in Expo's model.

Microsoft: can this be used outside of Expo, in a pure Metro environment? Unknown. Once Expo integrates with dev server, it will be harder to separate.

Facebook: The react-native transformer does more than transpiling. It removes irrelevant platform code, adds variables like __DEV, etc. These may need to be replicated to make compatible/equivalent bundles.

Will check back in on Expo's progress next month as the work continues.

require() cycle detection in Metro

Facebook: Curious about how useful existing Metro impl is -- emits warnings, has a runtime cost.

Microsoft: Built a Metro plugin for this in @rnx-kit. Only deals with cycles in the monorepo, not node_modules. Saves a lot of debugging/diagnostic pain.

Stripe: Had to disable built-in Metro code due to many known cycles in the monorepo and in node_modules. Working on that. Would like to see it on the server side as well.

Will check back in with Facebook on any progress next month. Seems like a good, useful feature if it's ignores node_modules and the runtime cost can be eliminated.

Different bundle output formats? ESM, Hermes byte code, etc.

Facebook: It makes sense for Metro to have the capability to output ESMs, at least for web. Metro internally assumes CJS, and this would be hard to change. The underlying goal is to tree-shake in an efficient, cacheable manner. More exploration and thought is needed.

AirBNB: To make tree-shaking more efficient, added their own data to entries in the Metro transform cache. This includes what is needed to tree-shak without rebuilding the AST a second time, after transpilation. Aiming to upstream at some point down the road.

Good topic to go farther on next month when more AirBNB devs are present. Talk about when they might upstream.

TypeScript types for Metro

Many of us are maintaining private copies. flow2dts, which auto-gens react-native types, came up as an option. Also, manually publishing and maintaining on DefinitelyTyped. Metro isn't changing much, so it's a good time to do this work.

Microsoft: Working on building Metro type libraries but not publishing yet. Open to stewarding contributions from the BWG and the community, and will do the work to accept PRs and publish to DefinitelyTyped.

Please submit PRs with the types you've built. Adam (MSFT) will get these packages published under @rnx-kit and eventually under DefinitelyTyped when they are more complete. Will review progress next month.