基于Expo的Hermes架构RN项目：摇树优化验证与打包调试咨询

我有一个基于Expo打包的React Native项目（采用Hermes架构），目前通过以下代码声明常量并在应用中使用：

// src/utils/const.ts
export const __IOS__ = Platform.OS === 'ios';
export const __ANDROID__ = Platform.OS === 'android';

使用示例如下：

// src/App.tsx
import { Text } from 'react-native';
import { __IOS__ } from './utils/const';

export default function App(){
    return <Text>{__IOS__ ? 'ios' : 'android'}</Text>
}

理想情况下，生产环境打包时应将其优化为：

// src/App.tsx
import { Text } from 'react-native';
import { __IOS__ } from './utils/const';
export default function App(){
    return <Text>ios</Text>
}

但根据Expo官方文档，此类场景未被收录。由于无法查看Expo打包后的具体代码，我面临两个问题：

1. 如何对Expo项目进行更合适的生产打包与调试？
2. 上述摇树优化的假设是否成立？

我曾尝试通过expo start打包hbc文件，但因是二进制文件无法查看内部代码；咨询相关渠道也未得到明确答案。

问题解答 #

1. Expo项目生产打包与调试方法 #

• 生成可读的JS Bundle文件
  使用expo export --platform ios或expo export --platform android命令导出对应平台的原生项目，在导出的原生项目中可以找到编译后的文本格式JS Bundle：

  • iOS：ios/[项目名]/main.jsbundle
  • Android：android/app/src/main/assets/index.android.bundle
    直接打开这些文件就能看到打包后的代码逻辑。

• 解析Hermes二进制字节码（hbc文件）
  使用Hermes官方提供的反汇编工具，将hbc文件转成可读的文本：

  npx hermes disassemble path/to/index.android.bundle.hbc > output.txt
  

  执行后打开output.txt即可查看Hermes编译后的字节码逻辑，验证代码是否被优化。

• 本地生产模式调试
  启动生产模式的本地服务，模拟生产打包后的运行环境：

  expo start --no-dev --minify
  

  可以配合React DevTools或Hermes Inspector来调试运行时的组件逻辑，间接验证优化是否生效。

2. 摇树优化假设的有效性 #

这个优化假设是成立的，原因如下：

• Expo生产构建默认启用了Terser的常量折叠（constant folding）和死代码消除（dead code elimination）功能。Platform.OS在针对单一平台打包时是固定的常量值（比如iOS打包时Platform.OS就是'ios'），因此__IOS__会被直接折叠成true，__ANDROID__折叠成false。
• 当条件判断的结果确定后，Terser会自动移除不可达的分支代码，最终只保留当前平台对应的代码逻辑，也就是你理想中的优化结果。
• 验证方式：通过上面提到的方法导出原生项目，查看JS Bundle文件中的App组件代码，就能看到条件判断已经被替换为直接的文本内容。

内容的提问来源于stack exchange，提问作者bugyaluwang