Expo React Native Web构建包体积超限警告的优化最佳实践

针对已基于@expo/webpack-config自定义配置、开启offline模式、手动调整资源阈值仍触发Webpack体积警告的场景 #

1. 替换无效的阈值硬调操作，落地Webpack原生分包逻辑 #

之前手动设置maxEntrypointSize、maxAssetSize阈值的操作本质是收紧了Webpack的分包判定空间，反而会让正常生成的中小型chunk被判定为超限，正确的操作是在自定义webpack配置中手动配置splitChunks规则替代靠调阈值消警告的逻辑：

• 开启全量chunk拆分，在配置中写入对应规则，将node_modules内的公共依赖抽离成独立vendor chunk，将被多个模块复用的公共业务代码抽成共享chunk，避免所有依赖全部堆在入口包中，参考可直接套用的配置片段：splitChunks: { chunks: 'all', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, name: 'base-vendor', priority: -10 }, shared-common: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }
• 抛弃已废弃的require.ensure懒加载语法，基于React官方懒加载能力做路由级代码分割：将所有非首屏展示的页面组件从静态全局import改为React.lazy包裹的动态import形式，每个页面会生成独立的异步chunk，仅在用户访问对应路由时才加载对应资源，可直接将入口包体积降低40%以上。

2. 针对Expo Web专属构建链路的冗余资源剔除 #

Expo Web构建存在部分默认开启的冗余资源产出，往往是触发体积超限的隐形原因：

• 生产构建阶段关闭全量source map产出，在配置中设置devtool: false，避免未压缩的source map文件被计入静态资源体积触发警告，这类文件通常会占产出总体积的30%~50%。
• 调整当前开启的offline模式的预缓存规则，将单个体积超过100KiB的异步chunk排除在service worker预缓存列表外，避免这类大资源被构建统计系统判定为入口包的关联资源。
• 通过Webpack的模块替换插件，在Web构建阶段剔除仅适配iOS/Android的原生端依赖：将仅调用原生能力、Web端无对应实现的模块路径，替换为Web端的轻量占位实现，避免原生端专用的重依赖被打包进Web产出。

3. 大体积依赖的精准裁剪 #

完成基础分包和资源剔除后，通过构建产出的stats文件逐一定位占比超过30%的大依赖，做针对性裁剪：

• 替换全量引入的重型工具库，比如将全量导入的moment.js替换为体积仅2%的dayjs实现，减少无意义的语言包、时区包打包。
• 对矢量图标库、UI组件库做按需导入，避免将整个字体包、全量组件代码打进入口chunk，仅导入当前项目实际用到的组件和图标资源。

内容的提问来源于stack exchange，提问作者Esteban Chornet