使用 Expo Atlas 和 Lighthouse 分析 JavaScript 包

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

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

🌐 Bundle performance varies for different platforms. For example, web browsers don't support precompiled bytecode, so the JavaScript bundle size is important for improving startup time and performance. The smaller the bundle, the faster it can be downloaded and parsed.

使用 Expo Atlas 分析包大小

🌐 Analyzing bundle size with Expo Atlas

项目中使用的库会影响生产环境 JavaScript 包的大小。你可以使用 Expo Atlas 可视化生产包，并确定哪些库会增加包的大小。

🌐 The libraries used in a project influence the size of the production JavaScript bundle. You can use Expo Atlas to visualize the production bundle and identify which libraries contribute to the bundle size.

在 npx expo start 中使用 Atlas

🌐 Using Atlas with npx expo start

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

🌐 You can use Expo Atlas with the local development server. This method allows Atlas to update whenever you change any code in your project.

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

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

🌐 Changing development mode to production

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

🌐 By default, Expo starts the local development server in development mode. Development mode disables some optimizations that are enabled in production mode. You can also start the local development server in production mode to get a more accurate representation of the production bundle size:

在 npx expo export 上使用 Expo Atlas

🌐 Using Expo Atlas with npx expo export

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

🌐 You can also use Expo Atlas when generating a production bundle for your app or EAS Update. Atlas generates a .expo/atlas.jsonl file during export, which you can share and open without having access to the project.

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

🌐 You can also specify the platforms you want to analyze using the --platform option. Expo Atlas will gather the data for the exported platforms only.

分析转换后的模块

🌐 Analyzing transformed modules

在 Atlas 中，你可以按住 ⌘ Cmd 并点击图表节点以查看已转换的模块详细信息。此功能可帮助你了解模块如何被 Babel 转换、它导入了哪些模块以及哪些模块导入了它。这可以用于追踪依赖图中模块的来源。

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

🌐 Analyzing bundle size with source-map-explorer

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

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

🌐 If you are using SDK 50 or below, you can use the source-map-explorer library to visualize and analyze the production JavaScript bundle.

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

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

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

🌐 You might encounter a warning such as Unable to map 809/13787 bytes (5.87%). This occurs because source maps often exclude bundler runtime definitions (for example, __d(() => {}, [])). This value is consistent and not a reason for concern.

灯塔

🌐 Lighthouse

Lighthouse 是一个查看你的网站速度、可访问性和性能的好工具。你可以在 Chrome 的 审计 标签页中测试你的项目，或者使用 Lighthouse CLI。

🌐 Lighthouse is a great way to see how fast, accessible, and performant your website is. You can test your project with the Audit tab in Chrome, or with the Lighthouse CLI.

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

🌐 After creating a production build with npx expo export -p web and serving it (using either npx serve dist, or production deployment, or custom server), run Lighthouse with the URL your site is hosted at.