Expo v48切换Web导出命令后包体积增大的技术疑问

1. 构建体积增加是否正常？ #

npx expo export:web是Expo旧版的Web专属导出命令，在Expo 48中已被统一的npx expo export -p web替代，两者底层打包逻辑存在差异：新命令可能调整了Metro的默认打包策略、依赖解析规则或优化逻辑。因此小幅体积增加属于正常现象，但如果增幅超过20%则需重点排查。由于无法回滚测试，可通过对比两次构建的输出文件列表、打包日志中的模块统计信息，确认是否引入了额外的依赖或冗余代码。

2. 可排查移除的常见冗余项 #

• 代码映射文件（Source Maps）：Expo官方文档明确默认生产构建不包含，但需手动验证：检查app.json/app.config.js中web.build.sourceMaps是否被误设为true，查看构建输出目录是否存在.map后缀文件，确认打包命令未添加--source-maps参数。
• 未按需加载的依赖：部分UI库、工具库若未配置按需引入，会将全量代码打包。比如避免使用import * as X from 'library'，改用import X from 'library/sub-module'的方式；若使用Babel，可配置对应插件（如babel-plugin-import）实现自动按需导入。
• 开发环境冗余代码：检查process.env.NODE_ENV判断是否生效，避免将开发日志、调试工具（如React DevTools相关代码）打包进生产构建。可通过打包后的代码搜索console.log、__DEV__等标识，确认是否存在开发残留。
• 重复依赖版本：使用npm ls <package-name>或yarn why <package-name>检查是否有同一依赖的多个版本被引入，可通过package.json中的resolutions字段统一依赖版本。
• 未优化的静态资源：检查是否有大体积未压缩图片、未转码的字体文件直接打包。Expo默认会压缩图片，但自定义引入的静态资源需确保已通过expo-image或Metro配置进行优化。

3. 拆分主JS包实现客户端缓存复用 #

完全可以通过以下方式实现代码拆分，让未变更的chunk复用客户端缓存：

• 动态导入（Dynamic Import）：对非首屏必需的组件、页面使用import('path/to/module').then((module) => module.default)语法，Metro会自动将这部分代码拆分为独立chunk。
• 路由级拆分：若使用Expo Router或React Navigation，确保路由组件采用延迟加载方式（如Expo Router的lazy导入），框架会自动按路由拆分chunk。
• Metro配置优化：在metro.config.js中开启experimentalImportSupport: true和experimentalTreeShaking: true，增强摇树优化和动态导入支持；可通过serializer选项自定义chunk拆分规则。
• 第三方库分离：对体积较大的第三方库（如图表、地图SDK），优先考虑CDN引入（通过index.html直接加载），或用动态导入延迟加载，避免打包进主JS包。

4. #23987优化是否自动应用 #

PR #23987是针对expo export命令的Metro打包优化，只要你使用的Expo CLI版本包含该PR（Expo 48对应的CLI版本为6.0+，该PR在2023年3月合并，已纳入Expo 48的CLI版本），运行npx expo export -p web时会自动应用该优化。可通过npx expo --version确认CLI版本，若版本≥6.3.0则必然包含该优化；也可查看打包日志，若出现“Reducing Metro bundles for static web export”类提示，说明优化已生效。

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