使用 Expo Atlas 和 Lighthouse 分析 JavaScript bundle

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

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

使用 Expo Atlas 分析包大小

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

在 npx expo start 中使用 Atlas

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

一旦你的应用在 Android、iOS 和/或 web 上通过本地开发服务器运行起来，你就可以使用 shift + m，通过 开发工具插件菜单 打开 Atlas。

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

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

将 Expo Atlas 与 npx expo export 一起使用

在为你的应用或 EAS Update 生成生产包时，你也可以使用 Expo Atlas。Atlas 会在导出期间生成一个 .expo/atlas.jsonl 文件，你可以在没有访问项目的情况下共享并打开它。

你也可以使用 --platform 选项指定要分析的平台。Expo Atlas 只会收集已导出平台的数据。

分析转换后的模块

在 Atlas 中，你可以按住 ⌘ Cmd 并点击图中的节点，查看转换后的模块详情。此功能可帮助你了解模块是如何被 Babel 转换的，它导入了哪些模块，以及哪些模块导入了它。你可以借此沿着依赖图追踪模块的来源。

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

SDK 50 及更早版本 的替代方法。

如果你使用的是 SDK 50 或更低版本，可以使用 source-map-explorer 库来可视化并分析生产环境 JavaScript 包。

{
  "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'"
  }
}

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

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

Lighthouse

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

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