Metro：它是什么、关键功能和工作原理

什么是Metro？

Metro 是一个开源JavaScript包装器，由Meta团队为React Native创建。它取代了早期React Native版本中的Packager，并成为了该平台的标准编译工具。Metro不适用于网络开发：其架构专注于在JSC（JavaScriptCore）或Hermes JavaScript引擎下运行的移动应用。

创建历史和市场定位

Metro于2018年作为旧版React Native Packager的替代品而出现。创建的主要原因是需要一个能在大型移动应用中高效处理数百万个模块的包装器。与Webpack不同，Metro不支持CSS、HTML或图片作为模块——这些资源由单独的React Native工具处理。Facebook使用Metro构建其主要应用，该应用包含超过10万个文件。

Metro通过npm作为metro包分发，并随React Native CLI自动安装。Metro的版本与React Native的版本相关联，因此包装器的更新与平台的更新同步进行。

Metro包装器如何工作？

Metro接收应用的入口点，构建依赖图，转换每个模块，并将结果序列化为单一的包。该过程经历三个阶段：Resolve（模块解析）、Transform（转换）和Serialize（序列化）。

Metro中的编译过程

// 自定义转换的Metro配置示例
const metroConfig = {
  transformer: {
    babelTransformerPath: require('metro-babel-transformer'),
    async transform({ src, filename, options }) {
      const result = await babelTransform({ src, filename, options });
      return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        dependencies: [],
      };
    },
  },
  serializer: {
    createModuleIdFactory() {
      let nextId = 0;
      const moduleIds = new Map();
      return ({ path }) => {
        if (!moduleIds.has(path)) {
          moduleIds.set(path, nextId++);
        }
        return moduleIds.get(path);
      };
    },
  },
};

在Resolve阶段，Metro确定每个导入模块的位置，考虑别名和node_modules。在Transform阶段，每个文件经过Babel转换器将JSX、TypeScript和其他扩展转换为纯JavaScript。最后的Serialize阶段将所有转换后的模块收集到一个或多个包文件中。

Metro架构

Metro基于模块化架构构建，其中每个编译阶段作为独立组件实现。这样可以在不更改包装器内核的情况下，用自定义模块替换标准模块。Metro架构包括三个主要包：metro、metro-config和metro-resolver。

Metro的关键组件

Metro Server — 开发服务器，通过命令npx react-native start启动。它在实时处理模块转换请求，实现Fast Refresh。Module Store — 缓存，将转换后的模块存储在内存中以加快重复编译。Dependency Graph — 依赖图，在文件发生变化时逐增更新。

Watchman — Meta的文件监视器，Metro利用它检测文件系统中的变化。没有Watchman，Metro必须在每次变化时重新扫描整个文件结构，这大大减慢了开发。安装Watchman是在任何大小的项目上舒适使用Metro的必要条件。

在React Native项目中配置Metro

配置 Metro在项目根目录的metro.config.js文件中定义。典型的文件定义额外的模块搜索目录、用于排除不必要文件的阻断列表以及自定义转换器。在React Native 0.72+中，使用自动配置检测，但对于单仓库，配置是必须的。

React Native的基础Metro配置

// metro.config.js
const config = {
  resolver: {
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json'],
    nodeModulesPaths: ['node_modules'],
    blockList: [/\.test\.js$/, /__tests__\/.*/],
    extraNodeModules: {
      'shared-components': path.resolve(__dirname, '../shared/src'),
    },
  },
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
      mangle: { reserved: ['React', 'Component'] },
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

blockList排除测试文件不参与编译，减小包的大小。nodeModulesPaths指明搜索包的额外路径——对于单仓库至关重要。extraNodeModules为单仓库不同项目中使用的共享包创建别名。

Metro编译优化

Metro提供了多种机制来优化包的大小和编译速度。Inline Requires — 最有效的技术，将顶级导入转换为函数内的本地require。RAM bundles允许逐增加载模块。Hermes将JavaScript编译为字节码，将应用程序的大小减少20–30%。

启用Inline Requires和Hermes

// metro.config.js — 生产环境优化
const config = {
  transformer: {
    async transform({ src, filename, options }) {
      const inlineRequires = options.dev ? false : true;
      return await defaultTransform({ src, filename, options: { ...options, inlineRequires } });
    },
  },
  serializer: {
    polyfillModuleNames: [],
  },
};

// 要启用Hermes——在build.gradle（Android）中：
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// 对于iOS——在Podfile中：:hermes_enabled => true

为了诊断包的大小，Metro提供了带统计信息的--bundle-output标志。使用bundle-visualizer分析包的组成并找到可以懒加载的大型模块。定期检查包大小应该成为React Native项目CI/CD管道的一部分。

Delta包和逐增编译

Metro支持delta包——在第一次完整编译后，服务器只发送旧版本和新版本之间变化（delta）的机制。这样可以显著加快后续编译：更新时间从秒级降低到十几毫秒。Delta包在开发阶段特别有效，当开发者经常保存变化并重新加载应用时。

要在React Native中启用delta包，请在命令npx react-native bundle中使用--delta标志。在客户端，delta包从React Native 0.64开始得到支持。在生产编译中，不使用delta包——相反，为了最大程度的启动性能，使用带有Hermes字节码的完整包。这是因为开发速度的提升弥补了第一次完整编译的成本。

Hermes和Metro：共同工作

Hermes — Meta专门为React Native开发的JavaScript引擎。Metro在编译阶段生成Hermes字节码，这样应用程序就可以在不经过设备上昂贵的JavaScript编译的情况下启动。要启用Hermes，只需在metro.config.js中添加enableHermes: true并配置build.gradle或Podfile。与JavaScriptCore相比，Hermes将应用启动时间减少30–50%，将APK大小减少20–30%。

使用Hermes时，重要的是记住其限制：该引擎不支持Proxy、Reflect和一些ES6功能。大多数React Native应用不直接使用这些功能，但一些库可能产生冲突。在启用Hermes之前，通过官方兼容性检查清单检查项目所有依赖项的兼容性。启用Hermes后，Metro会自动切换到生成字节码模式。

Metro性能监控

要跟踪Metro编译的效率，请使用通过Flipper（React Native调试工具）可获取的内置指标。Metro发布事件：bundle_request、transform、resolve，包含每个阶段的执行时间。分析这些数据有助于识别瓶颈：如果转换阶段占用超过70%的时间，问题出在Babel转换器中。通过--verbose标志启用Metro日志以进行详细诊断。