Add tree-shaking to the metro bundling process

[afoxman]

Tree-shaking is the practice of finding and excluding unused JS code when assembling a bundle file. It has been historically absent from Metro, despite several attempts to get it added over the years. A prototype implementation has recently gained traction, and should be the starting point for this work.

[tido64]

I had a quick look at the prototype PR:

• You can skip most of the PR, all the way to packages/metro-babel-transformer/src/index.js
  • The first 65 files are adding a test app
  • packages/metro-tree-shaking/ is where the interesting bits are
• metro-transform-worker: An extra transformation was added here for some reason
  • I'm not sure why it couldn't reuse an existing one
• metro-tree-shaking implements "module-level" tree shaking:
  1. First, gather all imports (see collectExports())
  • Exports of dependencies are reference counted
    • Example: A depends on B, increment ref count of all names exported of B
  • If the dependency has sideEffects: true, then the depending module also produces side effects
  2. Filter out ignored modules, and the ones that have sideEffects: true
  3. For every unused reference, traverse its dependencies and decrement the ref count
  • There's more stuff happening here that I can't quite decipher
  4. Finally, remove the unused ones
• Some modules need to be explicitly ignored, such as Babel and react-native, because they provide utilities that are used by generated/injected code.

[tido64]

Result from investigating Hermes' impact on bundle size when it comes to tree shaking:

lpc-android	Size	Delta
Haul	2 158 968	-
Haul → Hermes@0.4.3	1 961 778	-197 190 (-9%)
Haul → Hermes@0.7.2	1 942 512	-216 456 (-10%)
Metro	2 693 589	+510 882 (+24%)
Metro → Hermes@0.4.3	2 416 724	+257 756 (+12%)
Metro → Hermes@0.7.2	2 398 056	+239 088 (+11%)

lpc-ios	Size	Delta
Haul	1 947 250	-
Haul → Hermes@0.7.2	2 046 124	+98 874 (+5%)
Metro	2 684 661	+737 411 (+38%)
Metro → Hermes@0.7.2	2 391 184	+443 934 (+23%)

Setup:

• Haul@0.19
  • { dev: false, minimize: true, namedModules: false }
• Hermes
  • -O -emit-binary -fstrip-function-names -output-source-map
• Metro@0.59
  • react-native bundle --dev false ...
  • babel.config.js: { disableImportExportTransform: true }
  • metro.config.js: { experimentalImportSupport: true }
  • Plugins: babel-plugin-lodash

[tido64]

Addressed by #292.