文档
BlogChangelogStar Us on GitHub
首页指南EASReferenceLearn
存档Expo SnackDiscord and forums新闻邮件

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

使用 Expo Atlas 和 Lighthouse 分析 JavaScript bundle

编辑页面

了解如何使用 Expo Atlas 和 Lighthouse 提升 Expo 应用和网站的生产环境 JavaScript bundle 大小。

不同平台的打包性能各不相同。例如，Web 浏览器不支持预编译字节码，因此 JavaScript 包的大小对于提升启动时间和性能很重要。包越小，下载和解析就越快。

使用 Expo Atlas 分析包大小

项目中使用的库会影响生产环境 JavaScript 包的大小。你可以使用 Expo Atlas 来可视化生产包，并找出哪些库对包大小有贡献。

在 npx expo start 中使用 Atlas

你可以在本地开发服务器中使用 Expo Atlas。这种方法允许你在修改项目中的任何代码时，Atlas 自动更新。

当你的应用在 Android、iOS 和/或 web 上通过本地开发服务器运行后，你可以使用 Shift + M 通过 开发工具插件菜单 打开 Atlas。

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

将开发模式切换为生产模式

默认情况下，Expo 会以 开发模式 启动本地开发服务器。开发模式会禁用 生产模式 中启用的一些优化。你也可以在生产模式下启动本地开发服务器，以便更准确地反映生产包大小：

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

将 Expo Atlas 与 npx expo export 一起使用

在为你的应用或 EAS Update 生成生产包时，你也可以使用 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 install --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 的 web server 输出，那么请使用以下命令来映射 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 标志，这样 source map explorer 就可以读取 source map。对于使用 Hermes 的原生应用，你可以使用 --no-bytecode 选项来禁用字节码生成。

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

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

此命令会在输出中显示 JavaScript 包和 source map 的路径。在下一步中，你将把这些路径传递给 source map explorer。

避免将 source map 发布到生产环境，因为它们可能同时带来安全问题和性能问题（浏览器会下载很大的映射文件）。

4

运行脚本来分析你的包：

Terminal
- npm run analyze:web

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

你必须通过调用 SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) 来提供 lib/mappings.wasm 的 URL，然后才能使用 SourceMapConsumer

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

你可能会遇到类似 Unable to map 809/13787 bytes (5.87%) 的警告。这是因为 source map 通常会排除打包器运行时代码定义（例如，__d(() => {}, [])）。这个数值是恒定的，不必担心。

Lighthouse

Lighthouse 是了解你的网站速度、可访问性和性能表现的绝佳方式。你可以在 Chrome 的 审核 选项卡中测试你的项目，或者使用 Lighthouse CLI。

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

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

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