文档
博客更新日志在 GitHub 上给我们加星
首页指南EAS参考学习
归档Expo SnackDiscord 和论坛Newsletter

使用 Expo Atlas 和 Lighthouse 分析 JavaScript 包

编辑

了解如何使用 Expo Atlas 和 Lighthouse 改善 Expo 应用和网站的生产 JavaScript 包大小。

包的性能在不同的平台上有所不同。例如，网络浏览器不支持预编译的字节码，因此 JavaScript 包的大小对于改善启动时间和性能是至关重要的。包越小，下载和解析的速度就越快。

使用 Expo Atlas 分析包大小

项目中使用的库会影响生产 JavaScript 包的大小。您可以使用 Expo Atlas 来可视化生产包并识别哪些库对包大小产生影响。

使用 npx expo start 运行Atlas

您可以使用本地开发服务器与Expo Atlas。此方法允许Atlas在您更改项目中的任何代码时更新。

一旦您的应用在Android、iOS和/或Web上通过本地开发服务器运行，您可以通过 dev tools插件菜单 使用 shift + m 打开Atlas。

Terminal
# 启动带Atlas的本地开发服务器
- EXPO_ATLAS=true npx expo start

将开发模式更改为生产模式

默认情况下，Expo在 开发模式 下启动本地开发服务器。开发模式禁用一些在 生产模式 下启用的优化。您也可以在生产模式下启动本地开发服务器，以获得更准确的生产包大小表示：

Terminal
# 以生产模式运行本地开发服务器
- EXPO_ATLAS=true npx expo start --no-dev

使用 npx expo export 的Expo Atlas

在为您的应用或EAS更新生成生产包时，您也可以使用Expo Atlas。在导出时，Atlas会生成一个**.expo/atlas.jsonl** 文件，您可以分享和打开该文件，而无需访问项目。

Terminal
# 为所有平台导出您的应用
- EXPO_ATLAS=true npx expo export

# 打开生成的Expo Atlas文件
- npx expo-atlas .expo/atlas.jsonl

您还可以使用 --platform 选项指定您希望分析的平台。Expo Atlas只会收集导出平台的数据。

分析变换模块

在 Atlas 中，您可以按住 ⌘ Cmd 并单击图形节点以查看变换模块的详细信息。此功能帮助您了解模块如何通过 Babel 进行变换，它导入了哪些模块，以及哪些模块导入了它。这可以用于追踪模块在依赖图中的来源。

使用 source-map-explorer 分析包大小

SDK 50及之前版本的替代方法。

如果您使用的是 SDK 50 或更早版本，可以使用 source-map-explorer 库来可视化和分析生产 JavaScript 包。

1

要使用 source map explorer，请运行以下命令进行安装：

Terminal
- npm i --save-dev source-map-explorer

2

在 package.json 中添加一个脚本以运行它。您可能需要根据您使用的平台或SDK调整输入路径。为简便起见，以下示例假设项目是Expo SDK 50，并且不使用Expo Router的 server 输出。

package.json
{
  "scripts": {
    "analyze:web": "source-map-explorer 'dist/_expo/static/js/web/*.js' 'dist/_expo/static/js/web/*.js.map'",
    "analyze:ios": "source-map-explorer 'dist/_expo/static/js/ios/*.js' 'dist/_expo/static/js/ios/*.js.map'",
    "analyze:android": "source-map-explorer 'dist/_expo/static/js/android/*.js' 'dist/_expo/static/js/android/*.js.map'"
  }
}

如果您使用 SDK 50 的 server 输出用于Web，则使用以下命令映射Web包：

Terminal
- npx source-map-explorer 'dist/client/_expo/static/js/web/*.js' 'dist/client/_expo/static/js/web/*.js.map'

Web 包输出到 dist/client 子目录，以防止将服务器代码暴露给客户端。

3

导出您的生产 JavaScript 包，并包含 --source-maps 标志，以便源映射浏览器可以读取源映射。对于使用 Hermes 的本地应用，您可以使用 --no-bytecode 选项禁用字节码生成。

Terminal
- npx expo export --source-maps --platform web

# 使用 Hermes 的本地应用可以禁用字节码以分析 JavaScript 包。
- npx expo export --source-maps --platform ios --no-bytecode

此命令在输出中显示JavaScript包和源映射路径。在下一步中，您将这些路径传递给源映射浏览器。

请避免将源映射发布到生产环境，因为它们可能引发安全和性能问题（浏览器将下载大型映射）。

4

运行脚本以分析您的包：

Terminal
- npm run analyze:web

运行此命令时，您可能会看到以下错误：

You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer

这可能是由于在 Node.js 18及以上版本中的 source-map-explorer 存在 已知问题。要解决此问题，请在运行分析脚本之前设置环境变量 NODE_OPTIONS=--no-experimental-fetch。

您可能会遇到警告，如 Unable to map 809/13787 bytes (5.87%)。这是因为源映射通常会排除打包器运行时定义（例如，__d(() => {}, [])）。此值是一致的，不必担心。

Lighthouse

Lighthouse 是检查您的网站速度、可访问性和性能的好方法。您可以通过 Chrome 中的 审计 选项卡或使用 Lighthouse CLI 测试您的项目。

在通过 npx expo export -p web 创建生产构建并提供服务（使用 npx serve dist、生产部署或自定义服务器）后，使用您网站托管的 URL 运行 Lighthouse。

Terminal
# 安装 lighthouse CLI
- npm install -g lighthouse

# 为您的网站运行 lighthouse CLI
- npx lighthouse <url> --view